Webアプリケーションの異なるページの背景色が異なる

Question

私は、Webアプリケーションを作成するための反応プロジェクトに取り組んでいます。私はログイン画面とユーザーがログインした後のメイン画面を持っています。これらは私のプロジェクトの唯一の2つのコンポーネントです。私はログインページのための青いボディの背景とメインページのための白いボディカラー/バックグラウンドを持っていたい。

body#page1{ 
    background-color:#000; 
} 

これは、各ページのbodyタグにidを付けることで役立ちます。しかし、リアクションコンポーネントにbodyタグを含めることはできません。では、どのようにして2つの異なるページに異なるボディカラーを持たせることができますか？

Answer 1

divを持って、上下左右に0pxと絶対位置を指定して、サイズに関係なくフルスクリーンを表示します。

<div className="page-one-bg"> 
    //all code of page 1 
</div> 

あなたのCSSファイルで

.page-one-bg { 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    background: #000; 
}