css - 是否可以在渲染某个 React 组件时应用不同的全局 CSS 规则？

Question

我正在使用 React 构建一个元素，该元素由 CMS 和表示站点组成。为了方便起见，我决定将两者合并为一个单元。我基本上有两个包装器组件，一个用于 CMS，一个用于表示站点。为了说明，我的主路由器看起来像这样:

 <Provider store={store}>
      <Router history={history}>
        <Switch>             
          <Route path="/cms"  component={Cms} />
          <Route path="/"  component={Site} />  
        </Switch>
      </Router>  
    </Provider>

“Cms”组件将包含所有 CMS 路由，而 Site 组件将包含表示组件。

问题是，我正在为 CMS 使用一些第 3 方管理模板，它附带一个巨大的 CSS 文件，其中包含大量全局规则:图标、字体、按钮等。

这会干扰应用程序“表示”部分的样式。

是否有可能以某种方式仅在安装某个组件时应用整个 css 模块？在这种情况下，它将是“Cms”包装器组件。

Answer 1

我过去使用的解决方案是通过在 React 应用程序代码中创建单独的覆盖文件来覆盖主要父 css 文件的 css 属性。

如果您使用的是 Webpack，可以将一个名为 Common Chunks 插件的插件添加到您的 Webpack 配置中。 More info about Common Chunks Plugin

然后，您可以通过选择在从插件创建的每个样式 block 中导入覆盖来分配特定的 css 属性。

例如A 类将属性覆盖为蓝色，因此导入 Chunk1.sass，但 B 类需要相同的属性以具有红色背景，因此将在其模块导入中导入 Chunk2.sass。