根据反应状态应用 CSS 主题

Question

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

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

深色.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运行它时一切看起来都正确。

Answer 1

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

React 使用[name].module.css文件命名约定支持 CSS 模块和常规样式表。

CSS模块允许您在不同的文件中使用相同的 CSS 类名，而不必担心命名冲突

Answer 2

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

.dark .card {
color: black;
}
.light .card {
color: white;
}

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

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

就像一个魅力。