ボディの背景色を変更するには

私は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'はブラウザのグローバル変数です。どこからでもアクセスできます。 –

私はreactjをnodejsサーバからレンダリングしています。 'document'は私のために定義されていません –

-1

「ラッパー」などのIDを持つラッパーcomponenetを行い、その後、色の状態でスタイルを作成：

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

ボディの背景色を変更するには

答えて

関連する問題