为啥我的 CSS 模块父级继承了子级的属性？

Posted 2023-02-21

【中文标题】为啥我的 CSS 模块父级继承了子级的属性？

【英文标题】：Why do my CSS modules parents inherit properties of children?为什么我的 CSS 模块父级继承了子级的属性？

【发布时间】：2021-08-05 21:20:37

【问题描述】：

我有以下语法（JSX）：

  <div ref=setNodeRef style=style className=`$styles.section $className col-md-12`>
    <div className=`$styles.green`></div>
  </div>

在我的file.module.css 中，下面的 CSS：

.section 
  display: flex;
  position: relative;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 12px;
  border: 1px solid red;


.green 
  width: 10px;
  height: 10px;
  border: 1px green solid;

看起来.section 继承了.green 的属性，即使两者没有任何关系。这怎么可能？

【参考方案1】：

在这种情况下，问题是我以非唯一方式生成类名。因为我使用的是 CSS 模块，所以我玩弄了一些东西，弄乱了 webpack.js 配置中的 localIdentName 变量。

设置如下：

localIdentName: '[path][name]__[local]--[hash:base64:5]',

让它再次工作，因为类现在是独一无二的。