如何更改主体的背景颜色

我正在使用react.js并且想要更改整个页面的背景颜色。我无法弄清楚如何做到这一点。请帮忙，谢谢。如何更改主体的背景颜色

2017-02-26 Ethan Davis

自从我问这个问题已经有一段时间了。自那时起，我开始使用FB的create-react-app设置，并直接编辑CSS文件。

2018-02-02 18:22:52

最简单的办法是有点哈克，但你可以使用原始的JavaScript修改体型：

document.body.style = 'background: red;'; 
// Or with CSS 
document.body.classList.add('background-red');

一个清洁的解决方案是使用一个头像经理或react-helmet到next.js Head component。

import React from 'react'; 
import {Helmet} from 'react-helmet'; 

class Application extends React.Component { 
    render() { 
    return (
     <div className="application"> 
      <Helmet> 
       <style>{'body { background-color: red; }'}</style> 
      </Helmet> 
      ... 
     </div> 
    ); 
    } 
};

一些css-in-js还提供了管理全局级别样式的工具;像styled-components injectGlobal。

最后，有很多工具提供了更好的方法来处理这个问题。但是如果你不想依赖第三方，那么原始的JS选项可能会足够好，如果你不使它过于交互。

来源

2017-02-26 05:08:49

我能从reactjs组件中获取文档吗？我现在正在尝试这样做，但没有任何运气。 'document'刚回来时未定义 –

@EthanDavis'document'是浏览器中的全局变量;你可以从任何地方访问它。 –

我从一个nodejs服务器渲染我的reactjs。 'document'对我来说是未定义的 –

-1

做一个包装组元中包含“包装”的ID，然后创建一个颜色状态样式：

getInitialState: function() { 
    return { color: "white" }; // Set your color for initial state. 
}, 

changeColor: function() { 
    this.setState({ color: "black" }); // Set your changed color. 
}, 

render: function() { 
    var style = { backgroundColor: this.state.color }; 
    // The wrapper (root) component 
    return (
    <div id="fullscreen" style={style}> 
     <a onClick={this.changeColor}>change</a> 
    </div> 
); 
}

结果应该是这样的：

<body> 
    <div id="fullscreen" style="background-color: YOUR CUSTOM COLOR"> 
     <a onclick="THE REACT FUNCTION"></a> 
    </div> 
</body>

来源

2017-02-26 05:31:48

阵营头盔 （https://github.com/nfl/react-helmet）

我真的觉得这个库非常有用。我会说真的很干净的解决方案。

用法示例：

import Helmet from 'react-helmet'; 

<Helmet bodyAttributes={{style: 'background-color : #fff'}}/>

来源

2017-08-09 10:37:41 Rahul

没有做任何幻想，最简单的解决方法是：

1）开放的公共/ index.html的

2）添加为内嵌样式您的身体像这个： <body style="background-color: red">

来源

2017-10-15 14:51:25 Reni

如何更改主体的背景颜色

回答

相关问题