从 css 模块中引用全局类名

Question

想象一个更传统的 Web 应用程序，它正在一个复杂到足以需要它的页面中慢慢引入 React 组件。

我们正在使用 Webpack 开发这个新的 UI，并且我们使用 css 模块来实现新 UI 所需的所有新 css。但我们仍然需要重用一些全局的 css，并通过 html 中链接的传统 css 样式表在应用程序中提供。

因此，我们需要在 css 模块中偶尔编写引用全局命名空间中的 css 类的规则，而不是本地范围内的类，因此在应用程序运行时转换为更像 gem 的长 css 类名：

.container {
  // rules for container
}
.container.pull-right {
  // rules for when the container element also has the pull-right class
}

在上面的示例中，container它是一个 css 类，css 模块将使用该模块将其上下文化到特定组件。

但是pull-right是存在于页面中可用的 css 文件中的类，但不被 css 模块或 Webpack 处理。因此，我们需要一种方法（可能是语法）来告诉 css 模块“嘿，保持pull-right输出中的原样。不要弄乱它或尝试将其删除”。

我想这样的东西应该存在，但到目前为止我还没有通过谷歌搜索找到它。

Answer 1

要引用:local作用域 css 模块内全局声明的类名，您应该使用:globalswitch：

  .container {
    // rules for container
  }

  .container:global(.pull-right) {
    // rules for when the container element also has the pull-right class
  }

css-modules 文档中有更详细的解释。