如何在react上动态更改背景css

Question

我是新手。我有一个应用程序，在那里我必须实现一个功能，其中用户应该能够在一个正常的站点&色盲网站(基本上网站是为这两类用户提供的(。基本上，我们将更改react应用程序的背景(即，对于色盲者为黑色，对于正常用户为白色(。为了实现这些功能，该网站将有2个按钮(1个按钮用于色盲和1个按钮适用于正常人(。一旦用户点击"；"色盲"；按钮，网站背景颜色将变为黑色；当用户单击"正常"按钮时，网站将具有默认/正常外观。

我不知道如何在react中进行处理，所以在这里寻求一些好的帮助。

提前感谢

Answer 1

react上下文文档包含专门关于主题化的示例。

如果你不想走这条路，你可以在页面的根或应用程序的根上切换一个css类，并相应地调整你的css规则。

下面的示例不是特定于react的，但可以很容易地在react中实现。

function toggleTheme () {
document.body.classList.toggle('dark');
}

body {
background: bisque;
color: tomato;
}
body.dark {
background: tomato;
color: bisque;
}

<div id="demo">hello</div>
<button onclick="toggleTheme()">Toggle</button>

Answer 2

如果您在react主题概念中使用样式化组件，在这种情况下可能会有所帮助。通过导出包装器组件，样式化组件具有完全的主题化支持。该组件通过上下文API为其下的所有React组件提供一个主题。

Answer 3

您知道可以在HTML中的任何位置使用<link>和<style>元素吗？

你可以把一个组件放在任何地方，代码行如下：

<link rel="stylesheet" href={ this.state.color_blind ? "color_blind.css" : "style.css"/>

无论代码在层次结构中的位置如何，它都将应用于整个页面。