Reactjs 模块scss与类选择器不工作

我有一个简单的scss文件

.navItem {
  cursor: pointer;
    
  &.active {
    color: $primaryPurple;
  }
    
  &:hover {
    color: $primaryPurple;
  }
    
  span {
    margin-left: 10px;
  }
}

由于某种原因，

：hover

可以工作，但

active

不能工作。如下图所示，

li

显然具有活动类，但我没有看到字体颜色css发生变化

---

提供jsx代码会有所帮助，但我猜您使用

active

作为字符串文本，因此您的代码看起来像

import styles from './componentName.module.css';

// and then in the component

<li className={`nav-item ${styles.AdminSideBar_navItem} ${whateverCondition ? 'active' : ''}`}>
     ...children...
</li>

在html中，您将看到

 <li class="nav-item AdminSideBar_navItem_abcd active_bcde">

---

我在中添加了一个简单的示例，您可以使用它，看看它是如何工作的。

TL；DR：将名称作为JavaScript对象传递，而不是简单的字符串

实际上，这个问题来自

css模块
配置。显然，基于嵌入图片中的
AdminSideBar\u navItem\u\u 1aFBc
。您在网页包配置中的
css模块
配置为：

//网页包配置
module.exports={
~~~
模块：{
~~~
规则：[
{
测试：/\.scss$/,，
用法：ExtractTextPlugin.extract({
回退：“样式加载器”，
使用：[
{
加载器：“css加载器”，
选项：{
模块：对，
进口装载机：1，
localIdentName:'[name].[local].[hash:base64:5]“，//只需确保color属性没有被某个父元素覆盖，而且在html和sass文件中使用的类nav项的命名似乎有所不同。我忘了指定，但这是React模块scss，因此您会看到奇怪的名称。没有任何内容会覆盖颜色样式。选择器暗示不起作用。我不知道如何让它在React模块SCS上工作。编译后的CSS是什么样子的？我正在使用create React应用程序。有一个完整的讨论是关于如何获得编译后的CSS是复杂的。我只是想看看是否有人以前使用过模块SCS，以及根据他们的经验，他们将如何做我想做的事情.模块scss是否经常使用？
 <li class="nav-item AdminSideBar_navItem_abcd active_bcde">

.navItem {
  cursor: pointer;
    
  &.active {
    fill: yellow;
  }