根据反应状态应用 CSS 主题答案

【问题标题】：Apply CSS theme based on react state根据反应状态应用 CSS 主题
【发布时间】：2020-02-09 10:29:58
【问题描述】：

我有一个 REACT 应用程序（使用 create react app 和 react-bootstrap 引导），如果用户在其设置中启用此选项，我正在尝试为其添加切换到 DARK 主题的选项。我将设置存储在服务器上并将它们提取到属性中。

我有一个名为 dark.css 的单独样式表，其中我的所有组件样式都被覆盖。

dark.css（示例）：

#root {
  background-color: var(--dark);
  color: var(--light)
}

.card {
   background-color: var(--dark); // overriding bootstrap styles here 
}

我正在尝试将它应用到我的应用程序的根目录，如下所示：

componentWillReceiveProps() {
        if (this.props.profile && this.props.profile.theme === 'dark') {
            require('./styles/dark.css');
        }
    }

使用yarn start 在本地运行应用程序时效果很好。但是当我实际使用 webpack 构建应用程序时，它的工作方式非常奇怪。无论选择哪个主题，都会应用和部分新样式。例如，从主主题应用背景，在深色主题中被忽略，但文本颜色相反。

为什么会这样？

使用 webpack 构建应用程序时，似乎根本没有应用深色样式表，尽管使用 yarn start 运行它时一切看起来都正确。

【问题讨论】：

请分享你的 webpack.config
我对所有事情都使用反应脚本。我还没有触及 webpack 配置。它是从我身上抽象出来的。
当您激活暗模式，然后刷新时，一切都会自行纠正吗？
不幸的是，没有。我通过将我的应用程序包装到动态类并加载所有 css 文件来解决我的问题，而不管选择的主题是什么（见答案）。这似乎效果很好。

标签： javascript css reactjs create-react-app

【解决方案1】：

我猜你有一个命名冲突，它覆盖了你的 css。

React 支持 CSS Modules 以及使用 [name].module.css 文件命名约定的常规样式表。

CSS 模块让您在不同的文件中使用相同的 CSS 类名，而无需担心命名冲突

【讨论】：

但这意味着我必须在每个组件中引用样式。我想通过加载 css 来覆盖全局引导样式。
@Smajl 如果您的 css 被引导程序覆盖，您能否检查一下开发工具？
是的，它们被覆盖了。我不明白为什么，因为它似乎使用了这些样式的一部分，即使它们没有被导入......
不确定我是否理解您最后的评论，您能举个例子吗？

【解决方案2】：

我解决了我的问题，只需导入所有样式的 css 表，然后像这样为它们添加前缀：

.dark .card {
   color: black;
}

.light .card {
   color: white;
}

我根据我的道具为包装器分配类：

<div id="root" className={theme}>
   // content
</div>

像魅力一样工作。

【讨论】：