CSS 모듈에 클래스를 중첩하여 반응시키는 방법은 무엇입니까?

Question

내 React 프로젝트에서 CSS 모듈을 사용하려고합니다. 문제의 첫 번째 부분은 중첩 된 CSS 클래스 (sass 사용)를 작성하면 내부 클래스에 액세스 할 수 있는지 여부를 알 수 없다는 것입니다. 이러한 클래스는 고유 한 클래스 이름으로 컴파일 된 것으로 보이기 때문입니다. 일부 코드 :

<div className={this.state.visible ? styles.header+" menu-visible" : styles.header}> 
    <div className="menu"> 
     <a className="link">title</a> 
    </div> 
</div> 

    .header { 
     &.menu-visible { 
      .menu { 
       display:block; 
      } 
     } 
    } 

나는 그것을 이런 식으로 작업을 수행하는 나쁜 관행으로 반응하고, 때로는 모든 아이들에 대한 속성을 변경 "메뉴 표시"인 포장 클래스가?

.header 안에 메뉴가 표시되면 변경되는 클래스가 여러 개 있습니다. 따라서 래핑 클래스를 변경하는 것이 편리 할 것입니다. 어떤 방법 으로든 참조 할 수 있습니까? 그래서 scss에 중첩 된 나머지는? 내가 생각할 수있는

편집

하나의 해결책은 클래스 명 = {styles.header.menu}와 클래스 명 = "메뉴"를 대체하는 것입니다하지만 작동하지 않을 것 같았다. 문제는 부모가 클래스 메뉴를 볼 수있는 경우 .menu의 속성을 변경하고 싶습니다.

Answer 1

처럼 보인다, 나는 그것을 해결했다. 나는 내 마음 속에서 나는 그것을 과하게 생각했다. styles.header.menu를 쓰는 대신 styles.menu를 작성할 수 있습니다. 중첩 된 경우에도 ...

Answer 2

다른 방법이 있습니다. 이 작업을 수행하려면 classnames 패키지를 사용합니다. 그것은 뭔가 것이다

https://github.com/JedWatson/classnames

확인이

<div className={classnames('styles.header',{ 'menu-visible': this.state.visible})}>