Question

我正在开发一个使用ReactJS和CSS模块的项目，每个反应组件都有一个相应的SASS文件。

在编写CSS时，每个类都会附加＆＃39; 三重下划线随机字符串＆＃39;例如.myClass__e7G3A

我的应用根据滚动位置向正文标记添加一个类（顶部＆＃39;或＆＃39; down＆＃39;），我希望我的组件对此做出响应。

我遇到的问题是，如果我在CSS模块中添加.top或.down，那么它也会将唯一标识符附加到该类的末尾。

e.g。

JSX：

<div className={styles.main}>
  Main content goes here.
</div>

呈现HTML：

<body class="top">
  <div class="main___iZy2A">
    Main content goes here.
  </div>
</body>

SASS文件：

.top .main {
  margin-top: 0;
}
.down .main {
  margin-top: 100px;
}

已编译的CSS：

.top___Gvf3S .main___iZy2A {
  margin-top: 0;
}
.down___kpd3S .main___iZy2A {
  margin-top: 100px;
}

所需的CSS结果：（.top和.down没有唯一标识符）

.top .main___iZy2A {
  margin-top: 0;
}
.down .main___iZy2A {
  margin-top: 100px;
}

我确定我错过了一个简单的标识符或者可以实现此目的的东西。

希望你能提供帮助。感谢。

Answer 1

在选择器上使用:global：

:global(.top) .main___iZy2A {
  margin-top: 0;
}
:global(.down) .main___iZy2A {
  margin-top: 100px;
}

或:global和:local的组合，如果您有更多的全局选择器：

:global .top .top--left :local .main___iZy2A {
  margin-top: 0;
}
:global .down .down--right :local .main___iZy2A {
  margin-top: 100px;
}