CSS Modules - Exclude Class from Being Transformed

CSS Modules - exclude class from being transformed

Please do not use inline styles as someone else suggested. Stay away from inline styles as much as you can because they can cause unnecessary re-renders.

You should use global instead.

.my-component {
    :global {
        .external-ui-component {
           padding: 16px;
           // Some other styling adjustments here
        }
    }
}

https://github.com/css-modules/css-modules#usage-with-preprocessors

Also, I recommend using camel case style names which is the preferred way for css-modules.
So your class name would be : .myComponent { ... }

And you can use it in your code as

<div className={ styles.myComponent } >

If you wanted to add more styles , you can use the array.join(' ') syntax.

<div className={ [ styles.myComponent, styles.anotherStyle ].join(' ') } >

This is cleaner!

Setting modules to false in webpack config breaks all css

I solved this issue by replacing modules:false with

modules: {
    localIdentName: IS_DEV ? '[local]' : '[hash:base64:5]'
},

This makes it so that when running in dev mode (not production), the css classnames are visible and continue to work the same as in production. For more info, check out https://github.com/webpack-contrib/css-loader#modules

Related Topics