How can I use reactstrap when CSS module is enable?

Question

How can I use reactstrap when CSS module is enable? it seem reactstrap is not working properly. I use to call css by className={classes.mycss} but then I follow instruction here https://reactstrap.github.io/ and still it didnt work. Also I imported the bootstrap css in my index.js. Any idea how to fix this?

index.js

import 'bootstrap/dist/css/bootstrap.css';

myComponent

import { Button } from 'reactstrap';

Agney · Accepted Answer · 2018-03-15 09:28:12Z

1

There are certain problems with this approach:

CSS Modules localises the classnames to the module it is imported in, so if you import boostrap css, you will have to repeat that in every module.
CSS Modules requires classnames that are in camel case, which the bootstrap version is not.
Bootstrap styles are not written to be localised to a language. They are often meant to be shared.
Even if we use packages like Bootstrap CSS Modules, Reactstrap depends on the global classnames and will not work.

The way to the solve this problem might be to add bootstrap as a global stylesheet file and use classNames instead of CSS Modules specific styleName. You can do this by:

Adding a link tag to index.html file.

You can find the discussion here

answered Mar 15, 2018 at 9:28

Agney

19.3k7 gold badges60 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How can I use reactstrap when CSS module is enable?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related