更改< body>上的样式元素 [英] Changing style on <body> element
问题描述
我是React的新手，所以这可能很简单，但是我无法在文档中找到任何内容，因为该元素位于ReactDOM之外.
我正在使用material-ui作为用户界面，它提供了两个主题:lightBaseTheme(默认)和darkBaseTheme，具有较深的颜色.白天和黑夜模式的排序.问题在于，这两个样式均未应用于<body>，因此页面背景不会遵循主题.深色主题使用白色文本，该文本不会显示在默认的白色背景上.
我怀疑我需要找到一个编程解决方案，并根据当前加载的主题设置背景颜色.
但是如何?我尝试将代码放入顶级组件的componentDidUpdate方法中，但这似乎总是返回浅色主题.无论如何，即使body元素位于不受React影响的任何事物之外，我也不确定直接写入DOM是一种好习惯.
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>
);
}
};
即使在渲染调用中设置了lightBaseTheme，在componentDidUpdate中对getMuiTheme的调用也始终返回lightBaseTheme.
我也许应该补充一点，最终目的是能够即时更改主题，因此直接设置<body元素的样式不是一种选择.
如果可能的话，最好的解决方案是在React应用程序中使用顶级div，以及用于解决问题的样式道具.
但是，由于componentDidUpdate()不会在初始化时被调用，并且加载后似乎没有任何用props/state更新的内容，因此您现在无法使用的内容.
发生更新后，将立即调用componentDidUpdate().初始渲染不调用此方法. (反应文档)
相反，请使用componentDidMount()，该组件会在组件安装到DOM时立即调用.
装入组件后，将立即调用>componentDidMount().需要DOM节点的初始化应在此处进行.如果需要从远程端点加载数据，这是实例化网络请求的好地方.在此方法中设置状态将触发重新渲染. (反应文档)
I am new to React so this may be simple but I cannot for the life of me find anything in the docs because the element is outside the ReactDOM.
I am using material-ui for the user interface and that provides two themes: lightBaseTheme (the default) and darkBaseTheme with darker colors. Sort of day and night modes. The problem is that neither apply any styling to the <body> so the page background does not follow the theme. The dark theme uses white text which does not show on the default white background.
I suspect that I need to find a programmatic solution and set the background color based on the currently loaded theme.
But how? I have tried putting code in the componentDidUpdate method of the top level component but that seems to always return the light theme. In any case I am not sure it is good practice to directly write to the DOM even though the body element is outside anything that is going to be affected by 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>
);
}
};
The call to getMuiTheme in componentDidUpdate always returns lightBaseTheme even after it has been set in the render call.
I should perhaps add that the ultimate intention is to be able to change the theme on-the-fly so directly styling the <body element is not an option.
If possible, the best solution would be to use a top level div inside your React app in addition to the style props to solve your issue.
However, what you have now won't work because componentDidUpdate() doesn't get called on initialization, and you don't seem to be having anything update it with props/state after loading.
componentDidUpdate() is invoked immediately after updating occurs. This method is not called for the initial render. (React Docs)
Instead, use componentDidMount(), which is called as soon as the component mounts to your DOM.
componentDidMount() is invoked immediately after a component is mounted. Initialization that requires DOM nodes should go here. If you need to load data from a remote endpoint, this is a good place to instantiate the network request. Setting state in this method will trigger a re-rendering. (React Docs)
Here's a good write up on the component lifecycle.
这篇关于更改< body>上的样式元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
