Unterschiedliche Hintergrundfarbe für verschiedene Seiten in der Webanwendung

Question

Ich arbeite an einem Reaktionsprojekt, um eine Webanwendung zu erstellen. Ich habe einen Login-Bildschirm und den Hauptbildschirm, der kommt, nachdem sich der Benutzer anmeldet. Dies sind die einzigen zwei Komponenten in meinem Projekt. Ich möchte blauen Körperhintergrund für Anmeldungsseite und weiße Körperfarbe/Hintergrund für Hauptseite haben. Ich las einige Threads, die

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

Dies, indem ID Body-Tag auf jeder Seite helfen. Aber ich kann das Body-Tag nicht in meine Reaktionskomponente aufnehmen, da dies nicht erlaubt ist. Wie kann ich also auf zwei verschiedenen Seiten unterschiedliche Körperfarben erreichen?

Answer 1

Haben Sie ein Div und geben Sie es oben, unten, links, rechts 0px und Position absolut, so dass es den gesamten Bildschirm unabhängig von der Größe abdecken wird.

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

in Ihrer CSS-Datei

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