更改元素的样式

小编典典

更改元素的样式

reactjs

我是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元素的样式。

阅读 248

2020-07-22

共1个答案

小编典典

如果可能的话，最好的解决方案是div除了使用样式道具来解决您的问题之外，还可以在React应用程序中使用顶层。

但是，您现在拥有的东西将无法使用，因为componentDidUpdate()不会在初始化时被调用，并且加载后似乎没有任何东西用props /
state更新。

*更新发生后立即调用 *componentDidUpdate（）。初始渲染不调用此方法。（React
Docs）

而是使用componentDidMount()，一旦组件安装到DOM上，就会调用。

*挂载组件后立即调用 *componentDidMount（）
。需要DOM节点的初始化应该在这里进行。如果需要从远程端点加载数据，这是实例化网络请求的好地方。在此方法中设置状态将触发重新渲染。（React
Docs）

这是有关组件生命周期的好文章。

2020-07-22