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

Question

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

Answer 1

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