React Routes - diversi stili sul body css tag

Ho due percorsi sulla mia app React: /a e /b.React Routes - diversi stili sul body css tag

Per /a, voglio il tag body css per avere un background-color: red;.

Per /b, voglio il tag body css per avere un background-color: blue;.

Entrambi i componenti a e b vivono in diversi file .JSX, ed entrambi importare il proprio file main.scss che definisce il proprio rispettivo bodybackground-color.

Tuttavia, dal momento che l'intera applicazione è compilato nel tag body, sembra che ci sia un conflitto, e solo uno dei body tag è rispettato per entrambi i percorsi.

<body> 
    <script src="bundle.js" type="text/javascript"></script> 
    </body>

Il motivo che voglio sul tag body e non solo un contenitore div è che voglio il background-color per essere visibile quando ho scorrere al di fuori dei confini della pagina (l'effetto rimbalzo su Mac e iOS).

Qual è il modo corretto per farlo?

fonte

2016-06-05 Snowman

Stai usando moduli CSS? O semplicemente importando il css? – QoP

@QoP importando il css – Snowman

Questo succede perché quando si importano i vostri stili nel vostro componente senza CSS moduli, gli stili sono globali così il vostro stilecorpo è definito due volte (è possibile vedere tutti gli stili nel tag <head>).

È possibile rimediare impostando il colore di sfondo nel metodo() componente componentDidMount.

Esempio

componentDidMount(){ document.body.style.backgroundColor = "red"// Set the style document.body.className="body-component-a" // Or set the class }

fonte

2016-06-05 13:12:57 QoP

React Routes - diversi stili sul body css tag

risposta

Problemi correlati