2016-06-05 4 views
6

내 React 앱에는 두 경로가 있습니다 : /a/b. 를 들어 React Routes - body css 태그의 다른 스타일링

/A, 나는 body CSS 태그가 background-color: red;을 갖고 싶어.

/B를 들어, 나는 body CSS 태그가 background-color: blue;을 갖고 싶어.

두 구성 요소 ab 다른 .JSX 파일에 살고, 둘 다 자신의 각각의 bodybackground-color를 정의 자신의 main.scss 파일을 가져옵니다.

그러나 전체 앱이 body 태그로 컴파일되므로 충돌이있는 것으로 보이며 body 태그 중 하나만 두 경로 모두에서 존중됩니다.

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

body 태그에 내가 원하는 이유뿐 아니라 컨테이너 사업부 내가 페이지 (Mac과 iOS의 바운스 효과)의 범위를 벗어난 스크롤 할 때 background-color가 볼 수 있도록 할 것입니다.

이 작업을 수행하는 올바른 방법은 무엇입니까? 당신의 스타일 (당신이 <head> 태그의 모든 스타일을 볼 수 있습니다) 두 번 정의 있도록 CSS 모듈이없는 구성 요소에 스타일을 가져올 때 때문에 무슨 일이 일어나고

+0

당신은 CSS 모듈을 사용하고 있습니까? 아니면 그냥 CSS를 가져 오는거야? – QoP

+0

@QoP css 가져 오기 – Snowman

답변

7

는 스타일은 글로벌 있습니다.

enter image description here

당신은 해결할 수 구성 요소 componentDidMount() 메소드에 배경 색상을 설정하여.

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