Question

如何使用React.DOM更改HTML body上的样式？

我尝试了这段代码并且无法正常工作：

var MyView = React.createClass({
  render: function() {
    return (
      <div>
        React.DOM.body.style.backgroundColor = "green";
        Stuff goes here.
      </div>
    );
  }
});

如果你从浏览器控制台执行它，它可以工作（但我需要它在ReactJS代码中工作）： document.body.style.backgroundColor = "green";

另请参阅此问题以获得类似但不同的解决方案： Change page background color with each route using ReactJS and React Router?

Answer 1

假设您的身体标签不是另一个React组件的一部分，只需照常更改：

document.body.style.backgroundColor = "green";
//elsewhere..
return (
  <div>
    Stuff goes here.
  </div>
);

建议将其置于componentWillMount方法，并在componentWillUnmount取消：

componentWillMount: function(){
    document.body.style.backgroundColor = "green";
}

componentWillUnmount: function(){
    document.body.style.backgroundColor = null;
}

Answer 2

将多个属性从js类加载到文档正文的好方法可以是：

componentWillMount: function(){
    for(i in styles.body){
        document.body.style[i] = styles.body[i];
    }
},
componentWillUnmount: function(){
    for(i in styles.body){
        document.body.style[i] = null;
    }
},

在你根据自己的意愿编写自己的体型后：

var styles = {
    body: {
        fontFamily: 'roboto',
        fontSize: 13,
        lineHeight: 1.4,
        color: '#5e5e5e',
        backgroundColor: '#edecec',
        overflow: 'auto'
    }
}

Answer 3

加载或附加额外类的最佳方法是在componentDidMount（）中添加代码。

使用 反应和流星 进行测试：

componentDidMount() {
    var orig = document.body.className;
    console.log(orig);  //Just in-case to check if your code is working or not
    document.body.className = orig + (orig ? ' ' : '') + 'gray-bg'; //Here gray-by is the bg color which I have set
}
componentWillUnmount() {
    document.body.className = orig ;
}

Answer 4

带有功能组件和 useEffect 钩子：

useEffect(()  => {
    document.body.classList.add('bg-black');

    return () => {
        document.body.classList.remove('bg-black');
    };
});

Answer 5

即使您可以通过对提供的答案做出反应来设置身体样式，但我更希望组件仅负责设置其自身样式。

就我而言，有一个替代解决方案。我需要更改正文backgroundColor。无需更改react组件的样式即可轻松实现。

首先，我将这种样式添加到index.html标头中。

<style>
    html, body, #react-app {
        margin: 0;
        height: 100%;
    }
</style>

然后，在最外层的组件中，将backgroundColor设置为所需的值，并将高度设置为100％。

Answer 6

这是我最终使用的。

JAVA_OPTIONS

尝试使用React.DOM设置主体样式

6 个答案: