htmlcsstwitter-bootstrapreactjscss-modules

How to use css-modules and bootstrap at same time?

I'm using electron-react-boilerplate for my project and this boilerplate is using css-modules for styling purpose. I'm having trouble with using bootstrap and custom style at the same place. Suppose i've a code snippet like,

<div className="container">
  <div className="row custom-css">
    // other codes...
</div>

in that case 'row' is one bootstrap className and 'custom-css' is my own style className. please help me to find some solution for these problem so that i can use css-modules and bootstrap together...

Solution

  • You need to import your CSS module styles from a module file specific to this component, then interpolate them into the classname via the returned object...

    MyComponent.css

    .myCustomClassName {
  color: #fff;
}

    MyComponent.js

    import styles from './MyComponent.css';

<div className={`row ${styles.myCustomClassName}`} />

    When output as HTML this would become something like...

    <div class="row MyComponent__myCustomClassName___n1cC4ge}` />

    So as long as you are loading the bootstrap CSS somewhere that should pick up on both