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?
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
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>