为什么我的 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 的属性，即使两者没有任何关系。这怎么可能？

【问题讨论】：

标签： css-modules react-css-modules

【解决方案1】：

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

设置如下：

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

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

【讨论】：