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

Question

我在使用模块中的合成覆盖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>
  

• 在webpack配置中，我有两个规则设置，使用普通file.css加载css-loader，使用*.module.css加载css-loader文件。

所有这些文件都已正确加载，并且样式都存在。这是问题所在：

file.css包含：

.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包含：

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

组件的当前输出：

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

所以这种风格应该被覆盖，但我在浏览器中看到的是padding-right仍然是20px。它似乎只发生在我尝试从全局样式编写时，因为如果我从同一个组件CSS文件中编写两个类，它会按预期工作。

有谁知道为什么这不起作用？

Answer 1

您可以尝试使用

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