How to Add a Custom bsStyle Property to a Button with React

Jun 25, 2020 • 5 Minute Read

Introduction

React follows the component-based architecture that contains the various HTML elements to create the user interface module of an app.

Every element in a component contains separate properties based on its type. For example, a file upload control has type as a file, and a text input control has type as a text.

In this guide, you will learn how to set custom styles and classes using bsStyle property to the react-bootstrap button.

Note

react-bootstrap was supporting the property called bsStyle, but now it’s been replaced by a new property called variant.

What is bsStyle/variant Property in react-bootstrap?

The react-bootstrap element is entirely the same as the vanilla bootstrap; the only difference is that all the aspects of react-bootstrap are rewritten and used by the React app.

The variant property provides the style variant to the element according to specific behavior like primary, secondary, danger, warning.

Provide Custom Styles Using bsStyle/variant Property

Styling is one of the essential aspects when it comes to the custom styles of an element. Thus, you can use a variant property.

      <Button variant="default">
    TEST BUTTON
</Button>
    

The <Button> element could be used from the library react-bootstrap, and the property variant defines the default styles to the button element.

Now, what if you want to add another different color or background to the button? This solution uses the styles property along with the variant property, and the button element could be modified with custom styles.

Below is the complete example that uses variant and style properties together.

      import React, { Component } from "react";
import { Button } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
import './style.css';

class CustomStyle extends Component {
  render() {
    return (
      <div>
        <span>Add custom style using bsStyle in react-bootstrap</span>
        <hr />
        <Button
          variant="default"
          style={{ color: "white", background: "silver" }}
        >
          TEST BUTTON
        </Button>
      </div>
    );
  }
}

export default CustomStyle;
    

As seen in the above example, there is one <Button> element along with the two different properties called variant and style as shown below.

      <Button
    variant="default"
    style={{ color: "white", background: "silver" }}
>
    TEST BUTTON
</Button>
    

By using variant, the default styles would be applied, and by using the style the added property based on the custom styles would be applied.

Provide Custom Class Names Using bsStyle/variant Property

In the above example, we have applied custom styles along with the variant property. Applying styles seems to be a static approach, and it's not suitable for large apps.

You can apply the different custom class names along with the variant property, but before that creating the classes in a stylesheet file is a must and is explained below.

styles.css

      .textColor {
  color: white
}

.bgColor {
  background: purple
}
    

In the stylesheet file, there are two different classes, one to set the font color, and another to set the background color of the button element.

Now the next step is to apply those two classes to the button element as shown below.

      render() {
    return (
      <div>
        <span>Add custom style using bsStyle in react-bootstrap</span>
        <hr />
        <Button variant="default" className="cool">
          TEST TEXT
        </Button>
      </div>
    );
}
    

For example, there is one <Button> element used along with two different properties variant and className.

In the previous example, style property was used when the styles are specified inline, but in the above example there are two custom class names provided as shown below.

      <Button variant="default" className="textColor bgColor">
    TEST TEXT
</Button>
    

By doing this, the default variant would be applied to the button element, and the custom classes reflect in the button element.

Conclusion

The library react-bootstrap is flexible in defining the customized behavior of any element that resides in your React app in some context by using the added property like variant.

In this guide, you have learned two simple approaches to apply custom styles using bsStyle/variant property, and I hope it will be helpful while styling react-bootstrap elements.