What is the difference of using bsClass and className with react-bootstrap?

Question

I am new to react and could not grasp the concept between bsClass and className.

I try to implement a modified button style, like:

<Button bsClass="btn-custom" >Custom button</Button>

where it does not work when I substitute bsClass with className.

But in other part, using the same custom.css source, I implement:

<img src={logo} alt="logo" className="app-logo" /> and it works.

Answer 1

JSX attribute className is equivalent of HTML class. So the below JSX

<span className="app-logo">Logo</span>

will be equivalent to the below in HTML

<span class="app-logo">Logo</span>

As per bsClass is considered in

<Button bsClass="btn-custom" >Custom button</Button>

it is prop that is being passed on to the Button component in reactJS and that is what it will be using to set the className inside the component something like

<button className={this.props.bsClass}>{this.props.children}</button>

So it an attribute that is defined as a property by the react-bootstrap docs.

Answer 2

React's className is exactly equivalent to regular classes in CSS.

HTML/CSS:

<div class='red-text'>
    Foo
</div>

React/JSX:

<div className='red-text'>
    Foo
</div>

The above snippets of code do the exact same thing. The only reason we're stuck with using className in React (instead of class) is because "class" was already taken as a reserved keyword in JavaScript.

As the others have said, bsClass is a pre-defined class within the react-bootstrap package. Just like how the CSS-version of Bootstrap comes with its own styling, so, too, does react-bootstrap.