React Routes - inna stylizacja na body css tag

Mam dwie trasy w mojej aplikacji React: /a i /b.React Routes - inna stylizacja na body css tag

Dla /a, chcę tag body css mieć background-color: red;.

Dla /b, chcę tag body css mieć background-color: blue;.

Oba składniki a i b żyć w różnych plikach .JSX, a zarówno importować własne main.scss plik, który określa swój odpowiedni bodybackground-color.

Ponieważ jednak cała aplikacja jest wkompilowana w znacznik body, wydaje się, że istnieje konflikt i tylko jeden z tagów body jest respektowany dla obu tras.

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

Powodem chcę go na tagu body a nie tylko div kontenera jest to, że chcę background-color być widoczne, kiedy przewinąć poza granice strony (efekt odbić na Mac i iOS).

Jaki jest właściwy sposób na zrobienie tego?

Źródło

2016-06-05 Snowman

Używasz moduły CSS? Lub po prostu importowanie css? – QoP

@QoP importowanie css – Snowman

Tak się dzieje, ponieważ podczas importować style CSS komponentu bez modułów, style są globalne więc styl ciało definiuje dwa razy (można zobaczyć wszystkie style w tagu <head>).

można naprawić przez ustawienie koloru tła w componentDidMount składnika metoda().

Przykład

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

Źródło

2016-06-05 13:12:57 QoP

React Routes - inna stylizacja na body css tag

Odpowiedz

Powiązane problemy