Overwriting global CSS style in modules is not working

Question

I'm having a problem with overwriting CSS styles using composing in modules.

My current setup:

• I have a thirdparty grid library file which I insert into my application in the entry JS file:

  import './css/thirdparty/file.css';
  

• I'm also using CSS modules for my components like this:

  import styles from './component.module.css';
  
  const Component = () => {
  
  // component code omitted
  
  // in render
  <div className={styles.col14}></div>
  

• In webpack config, I have two rules setup to load the file.css using plain css-loader and the *.module.css files using css-loader with modules.

All of these files are loaded correctly and the styles are all present. Here's the problem:

file.css contains:

.col-1-4 /* and all other col-1-* variations*/ {
    float: left;
    min-height: 1px;
    padding-right: 20px;
}

.col-1-4 {
    width: 25%;
}

component.module.css contains:

.col14 {
    composes: col-1-4 from global;
    padding-right: 0;
}

Current output of the component:

<div class="col14__3bA8W col-1-4">

So the style is supposedly overwritten, but what I see in the browser is that the padding-right is still 20px. It seems to only happen when I try to compose from a global style, because if I compose two classes from the same component CSS file, it works as expected.

Does anyone know why this is not working?

Answer 1

You can try with

.col14 {
  composes: col-1-4 from global;
  padding-right: 0!important;
}