-1

如何动态地为lightdark模式动态更改整个背景?Redux 持有我的darkMode状态。

例如,我希望背景在开启时为黑色,darkMode而当我不在黑暗模式时为白色。如何动态调整?使用 HOC?

Redux(使用选择器):

const darkMode = useSelector((state: ReduxState) => state.accountPreferencesReducer.darkMode);

这是我一直向下滚动时遇到的问题(白色背景):

在此处输入图像描述

4

1 回答 1

0

通常在明暗模式下,人们通常使用上下文提供程序 ( https://reactjs.org/docs/context.html ) 来传递全局样式化组件。如何做到这一点的一个很好的例子可以在这里看到:https ://www.smashingmagazine.com/2020/04/dark-mode-react-apps-styled-components/

您可以通过从您想要受影响的每个组件内的 redux 读取您的暗模式状态来使用暗模式设置组件的样式(不建议)。然后,您需要为每个组件创建 2 个样式并执行以下操作:

const lightStyle = { backgroundColor: "white" };
const darkStyle = { backgroundColor: "black" };
const themeStyle = state.darkMode ? darkStyle : lightStyle;
.
.
<div style = {themeStyle}>
   <JSX-components/>
</div> 

这是很多工作,我建议您使用类似于更易于使用的程式化组件库的东西。

于 2021-03-17T08:42:18.340 回答