CSS 모듈 및 ReactJS : 다른 구성 요소의 상위 및 하위 CSS 클래스

Question

그래서 반응 애플리케이션을 만들고 빠른 질문을합니다. 두 개의 별도 구성 요소가있는 경우 및 에 CSS 클래스 navigation.css 및 navigationLogo.css가 각각 있습니다. navigation.css에서 나는 클래스는 .main 명명하고 navigationLogo.css에 그래서 같은 클래스를 갖고 싶어 :

.main .main_in_logo { 
color: red; 
} 

하지만이 작업을 수행 할 수없는 오전 CSS 모듈, 주변의 작업에 어떤 아이디어

?

Answer 1

하위 구성 요소에는 상위 CSS 클래스 이름에 종속 된 CSS 규칙이 없어야합니다.

아이가 바로되어야합니다 :

.main_in_logo { color: red; } 

당신이 필요 부모와 자식 모두를 포함하는 스타일을 정의 할 경우, 가장 쉬운 방법은 부모에 완전히 스타일을 정의하는 것입니다 :

/* navigation.css */ 
.main .main_in_logo { 
    color: red; 
} 

그런 다음 학부모에게 자녀에게 css 수업을 전달하게하고 자녀에게 사용하도록 알립니다 :

// Navigation.js 
<NavigationLogo className={navigationCss.main_in_logo} /> 

// NavigationLogo.js 
<div className={"foo " + this.props.className}>stuff</div> 

Answer 2

.main .main_in_logo을 작성해야하는 이유 - 상위 요소가있는 스타일의 기본 개념으로 앞으로 다른 스타일로 CSS를 부러 뜨리지 않아야합니다. 하지만 CSS 모듈에서는 불가능합니다. 스타일이 영원 할 것입니다.

하지만 실제로이 두 가지 구성 요소에 대해 글로벌 CSS를 사용할 수도 있습니다. documentation에 대한 global css는 react-css-modules입니다.