从 CSS 模块中访问全局类答案

【问题标题】：Access global classes from within CSS module从 CSS 模块中访问全局类
【发布时间】：2017-03-30 12:57:53
【问题描述】：

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

在编写 CSS 时，每个类都附加了“三重下划线随机字符串”，例如.myClass__e7G3A

我的应用根据滚动位置将一个类（top' 或 'down'）附加到 body 标记，我希望我的组件对此做出响应。

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

例如

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;
}

我确定我只是缺少一个简单的标识符或可以实现此目的的东西。

希望您能提供帮助。谢谢。

【问题讨论】：

【解决方案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;
}

【讨论】：

谢谢。我想这会很简单。
I get 'Error: composition is only allowed when selector is single :local class name not in' when attempting to do just this.你有什么想法可能来自哪里？
似乎是您的 CSS 模块配置中的问题。如果您使用的是 webpack，请检查 css 加载器。