How to customise react-bootstrap components?

reactjs react-bootstrap inline-styles react-css-modules
AloeVeraForty picture AloeVeraForty · Nov 22, 2016 · Viewed 36.2k times · Source

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

wolendranh picture wolendranh · Nov 22, 2016

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

Related questions

How to add a classname/id to React-Bootstrap Component?

Suppose we are using Row from React-Bootstrap... How do we style it without using a wrapper or inner element: <Row> <div className='some-style'> ... </Row> Ideally we could just do: <Row className='some-style> ... &…

Read More
Listen to keypress for document in reactjs

I want to bind to close the active react bootstrap popover on escape press .Here is the code _handleEscKey:function(event){ console.log(event); if(event.keyCode == 27){ this.state.activePopover.hide(); } }, componentWillMount:function(){ BannerDataStore.addChangeListener(this._onchange); document.addEventListener("click", …

Read More
Changing style of a button on click

Is it possible to change background-color of my button onClick function? ex. click background-color: black, another click background-color: white I've tried something like this.style, no result. I've managed to get overlay working and insert needed data inside of it. …

Read More