如何更改主體的背景顏色

我正在使用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

如何更改主體的背景顏色

回答

相關問題