ama*_*may 2 reactjs material-ui
我是React的新手，所以这可能很简单，但是我无法在文档中找到任何内容，因为该元素在ReactDOM之外。
我在用户界面上使用了Material-ui，它提供了两个主题：（lightBaseTheme默认）主题和darkBaseTheme深色主题。白天和黑夜模式的排序。问题在于，这两个样式均未应用任何样式，<body>因此页面背景不会遵循主题。深色主题使用白色文本，该文本不会显示在默认的白色背景上。
我怀疑我需要找到一个编程解决方案，并根据当前加载的主题设置背景色。
但是如何？我尝试将代码放入顶级组件的componentDidUpdate方法中，但这似乎总是返回浅色主题。无论如何，我不确定直接写入DOM是一个好习惯，即使该body元素在任何会受到React影响的内容之外。
export default class app extends React.Component {
componentDidUpdate () {
const muiTheme = getMuiTheme();
const canvasColor = muiTheme.palette.canvasColor;
document.body.style.backgroundColor = canvasColor;
}
render () {
const muiTheme = getMuiTheme();
return (
<MuiThemeProvider muiTheme={getMuiTheme(darkBaseTheme)}>
<span>Rest of the app goes here</span>
</MuiThemeProvider>
);
}
};
即使在render调用中设置了lightBaseTheme，对componentDidUpdate中的getMuiTheme的调用也始终返回lightBaseTheme。
我也许应该补充一点，最终目的是能够即时更改主题，因此不能直接设置<body元素的样式。
如果可能的话，最好的解决方案是div除了使用样式道具来解决您的问题之外，还可以在React应用程序中使用顶层。
但是，您现在拥有的东西将无法使用，因为componentDidUpdate()不会在初始化时被调用，并且加载后似乎没有任何东西用props / state更新。
发生更新后，立即调用componentDidUpdate（）。初始渲染不调用此方法。（React Docs）
相反，请使用componentDidMount()，在组件安装到DOM时立即调用。
挂载组件后立即调用componentDidMount（）。需要DOM节点的初始化应在此处进行。如果需要从远程端点加载数据，这是实例化网络请求的好地方。在此方法中设置状态将触发重新渲染。（React Docs）
| 归档时间： |
|
| 查看次数： |
3703 次 |
| 最近记录： |