CODEWITHSUNDEEP
twitter-bootstrapreactjsreact-bootstrappostcssreact-css-modules
shet_tayyy
shet_tayyy

Reputation: 5755

How to use react-bootstrap with postcss-module and react-css-module?

Below is my Greeter.jsx file:

import React, {Component} from 'react';
import cssModules from 'react-css-modules';
import {Button} from 'react-bootstrap';
import styles from './Greeter.css';

const option = {
  'allowMultiple': true
};

class Greeter extends Component{
  render() {
    return (
      <div styleName='root root-child'>
        <h1>Welcome to React Devops.</h1>

        <p styleName="para">This is an amazing para.</p>
        <p>Hot module reload.</p>

        <Button bsStyle="primary">Test</Button>
      </div>
    );
  }
}

export default cssModules(Greeter, styles, option);

Below is my main.js file:

import React from 'react';
import {render} from 'react-dom';
import Greeter from './Greeter';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/css/bootstrap-theme.min.css';

import './main.css';

render(<Greeter />, document.getElementById('root'));

I use postcss-modules and react-css-modules to isolate selectors within components due to which, when the file loads, the class name becomes something like _3lmHzYQ1tO8xPJFY8ewQax.

Example:

<div class="_3lmHzYQ1tO8xPJFY8ewQax _32vj3squi8uWPfEu4ZzyBZ" data-reactid=".0"></div>

Below is how react-bootstrap would give me the output:

<button class="btn btn-primary"></button>

which has not been isolated as I use bsStyle (react-bootstrap) rather than styleName(react-css-modules) and hence I cannot apply the bootstrap css style to the element.

Is there a way through which I can use react-bootstrap by isolating its class to match the output that postcss-modules generate?

Thanks in anticipation.

Upvotes: 10

Views: 3366

Answers (2)

Nur Rony
Nur Rony

Reputation: 8083

I also faced same issue while using react-bootstrap with css-module. In my case it was Tabs component. It looks hacky though but worked for me. I wrapped the component with a class and within the class I write scss as follows

// myComponent.scss
.myComponent {
      :global {
        .nav-tabs {
           li {
             //my custom css for tabs switcher
           }
        }
      }
    }

and the MyComponent.js is 

const tabsInstance = (
  <Tabs defaultActiveKey={1} animation={false} id='noanim-tab-example'>
    <Tab eventKey={1} title='Sign up'>Tab 1 content</Tab>
    <Tab eventKey={2} title='Login'>Tab 2 content</Tab>
  </Tabs>
)

export const MyComponent = () => (
  <div className={classes.myComponent}>
    { tabsInstance }
  </div>
)

export default MyComponent

Hope this is what you are looking for.

Upvotes: 2

Chris Knepper
Chris Knepper

Reputation: 156

Are you sure you're importing the Button component from react-bootstrap? In my React component, I must import it via import Button from 'react-bootstrap/lib/Button';, and I must write it as <Button> rather than <button>.

In my case, the following works:

<Button bsStyle={'btn btn-primary' + ' ' + styles.customButtonClass}>Test</Button>

react-bootstrap transforms certain elements (including Button) into divs, and maps the value provided to bsStyle to a Bootstrap class. You can override this by combining the generated className from css-modules and the actual Bootstrap class.

Upvotes: 0

Related Questions