Sovan Jana Sovan Jana - 2 years ago 131
CSS Question

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

Answer Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download