Search code examples
javascriptcssreactjscss-modulesreact-css-modules

Css module with react

I'm building a React website, to enable css modules styles I eject my project I used

npm run eject

And i added extra configurations in the webpack.config.dev.js and webpack.config.prod.js files, the problem is that I was using a component call react-big-calendar (https://github.com/intljusticemission/react-big-calendar), and in that module I have to import a css file. The problem is that when I enable the module features it doesn't apply the css styles to the calendar, It used to look like: enter image description here

And now it looks like this:

enter image description here

What can I do in order to apply classes from the big-calendar css file?

Thanks!

Solution

  • Now you don't have to eject your project and add extra config to webpack.config to enable css modules. Now whenever you want to use css modules, just name the file [name].module.css and that's it. This will solve your problem with the components which are not using css modules.

    Let me know if it works for you