反应动态主题

Question

我有一个反应16应用程序，并希望允许用户改变整个应用程序的主题(包括所有路线)按下一个按钮。

例如，我可以在SCSS中有两个主题：

.theme-1 {
    background-color: $bg-color-1;
    color: $color-1;
}
.theme-2 {
    background-color: $bg-color-2;
    color: $color-2;
}

然后我有一个按钮，如下所示：

<Button onClick={ this.changeTheme() }

这能办到吗？具体来说，我想弄清楚这两部分：

1. 如何在需要使用各种background-color和color的所有组件上设置主题。
2. changeTheme()函数的逻辑。它将如何触发对所有受影响组件的重呈现。

谢谢!

Answer 1

最好的方法是使用css变量。

您需要使用css变量指定主题，并在某些用户操作中在站点中添加额外的css。

1. 像前面提到的那样创建单一主题 -颜色:蓝色；-bg-颜色:红色；.theme {背景颜色:var(-bg-色)；颜色：(-颜色)；}
2. 在组件中添加其他样式 {this.state.useTheme &&：根{--颜色:蓝色；-bg-颜色:红色；}
3. 用户单击更改标志

或者另一个变体

1. 在指定不同变量的地方创建附加的theme.css文件 -bg-颜色:黄色；-颜色:绿色；
2. 将其附加到某些用户操作上。代码来源于这里 { var head = document.getElementsByTagName('head')；var link = document.createElement('link')；link.id = cssId；link.rel =‘样式表’；link.type = 'text/css'；link.href =‘http://your-website.com/path-to-css-file/theme.css'’；link.media = 'all'；head.appendChild(链接)；}>更改主题

这样做可以避免大量的代码重复。因为你不需要创建多个主题。您只需在更改时添加少量的额外css，就可以创建许多主题，甚至让用户自定义它们。