How to customise react-bootstrap components?

Question

What is the best way to override css classes/customise react-bootstrap components? - (I have read the docs, and unless I am missing something, this isn't covered).

From what I have read, it seems like it's a choice between inline styles (radium) and css modules but which is better and why?

Answer 1

I am not sure if this answers your question but Documentation clearly provide examples. For instance Button

Props

+--------+---------+--------+--------------------------------------------+
|  Name  |  Type   | Default| Description                                |
+--------+---------+--------+--------------------------------------------+
|bsClass |  string | 'btn'  | Base CSS class and prefix for the component|
+--------+---------+--------+--------------------------------------------+

This one could be modified to add custom CSS class to your Button component. Also component could be changed with setting componentClass.

<Button type="submit" onClick={this.submit}
 bsClass='custom-class'
>
</Button>

Where custom-class is CSS class that could

provide new, non-Bootstrap, CSS styles for a component.

Fiddle with example of how to use bsClass.

Inline styles:

According to bug filled, inline styles will not be supported officially.

you want to use the actual style prop. bsClass is for adjusting the way bootstrap css classes are applied to the components not inline styles

But issue states that:

You're free to use them if you want. We have no formal opinion.

NOTE Not all components provided by react-bootstrap allow class customization through bsClass, for example Breadcrumb

Answer 2

I think the answer to this for most people (like me) is that one can add custom styles to react-bootstrap components using the style prop. E.g. for a default Button with blue text:

<Button bsStyle="default" style={style.blueButton}>Button Text</Button>

or

<Button bsStyle="default" style={{color:"blue"}}>Button Text</Button>