ReactJS 몇 개의 CSS 파일

Question

내가 ReactJS로 SPA를 만들었지 만 스타일을 지정할 때 한 가지 문제가 있습니다. 그래서 3 개의 differente 페이지가 있습니다. (앞으로 더 많은 페이지를 추가 할 것입니다.) 그래서 각 파일에 고유 한 CSS 파일이 있습니다. 브라우저에서 사이트 열기가 나는 (인덱스) 괜찮아 페이지,하지만 난 다음 페이지 (페이지 2)에 갈 때 다시 클릭하고 (인덱스)로 이동로 이동 그래서이

*index.jsx 
import index form './index.css'* 

*page2.jsx 
import page3 form './index.css'* 

*page3.jsx 
import page3 form './index.css'* 

같은 두 CSS 파일에 동일한 이름의 클래스가 있고로드 된 두 번째 CSS 파일이 있기 때문에 페이지 스타일이 변경되었습니다. (page2.css)은 (index.css)을 어떻게 대체 할 수 있습니까? 질문은 매우 명확하지 않은 경우

감사합니다,

죄송합니다!

Answer 1

다른 컨텍스트를 구별하는 방법을 찾아야합니다. 코드를 보지 않고 말하기는 어렵지만 각 페이지에 ID를 적용 할 수있는 상위 요소가있는 경우 css 선택기에이 옵션을 포함시켜 각 경우에 실제로 스타일을 지정하려는 요소를 타겟팅 할 수 있습니다.

div#inIndex .myStyle { 
    /* styles */ 
} 

div#inPage2 .myStyle { 
    /* styles */ 
} 

div#inPage3 .myStyle { 
    /* styles */ 
} 

이 작업은 가능하지만 다른 클래스 이름을 사용하지 않는 이유는 무엇입니까?