Reactjs 覆盖模块中的全局CSS样式无效

我在使用模块中的组合来覆盖CSS样式时遇到问题

我当前的设置：

• 我有一个第三方网格库文件，我将其插入应用程序的条目JS文件中：

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

• 我还将CSS模块用于我的组件，如下所示：

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

  component.module.css

  包含：

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

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

  组件的电流输出：

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

  因此，样式应该被覆盖，但我在浏览器中看到，

  右边的填充仍然是
  20px
  。这似乎只有在我尝试从全局样式编写时才会发生，因为如果我从同一个组件CSS文件编写两个类，它就会按预期工作
  
  有人知道为什么这不起作用吗？
  你可以试试
  
  .col14 {
    composes: col-1-4 from global;
    padding-right: 0!important;
  }