为什么我的 CSS 模块父级继承子级的属性？

问题描述

我有以下语法（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 模块，因此我尝试了一些东西并弄乱了 localIdentName 配置中的 webpack.js 变量。

设置为：

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

使它再次起作用，因为类现在是唯一的。