CSS 모듈 내에서 전역 클래스에 액세스

저는 대응하는 SASS 파일이있는 각 반응 구성 요소와 함께 ReactJS 및 CSS 모듈을 사용하는 프로젝트를 진행하고 있습니다.CSS 모듈 내에서 전역 클래스에 액세스

CSS를 작성할 때 각 클래스에 '트리플 밑줄 임의 문자열'이 추가됩니다. .myClass__e7G3A

내 앱은 스크롤 위치에 따라 body 태그에 클래스 (상단 또는 하단)를 추가하고 구성 요소가 이에 응답하도록합니다.

CSS 모듈 내에 .top 또는 .down을 추가하면 고유 식별자가 해당 클래스의 끝에 너무 추가됩니다.

JSX :

<div className={styles.main}> 
    Main content goes here. 
</div>

렌더링 된 HTML :

<body class="top"> 
    <div class="main___iZy2A"> 
    Main content goes here. 
    </div> 
</body>

SASS 파일 :

.top .main { 
    margin-top: 0; 
} 
.down .main { 
    margin-top: 100px; 
}

컴파일 된 CSS :

.top___Gvf3S .main___iZy2A { 
    margin-top: 0; 
} 
.down___kpd3S .main___iZy2A { 
    margin-top: 100px; 
}

원하는 CSS 결과 : (고유 식별자없이 .top 및 .down)

.top .main___iZy2A { 
    margin-top: 0; 
} 
.down .main___iZy2A { 
    margin-top: 100px; 
}

난 그냥 간단한 식별자 또는 얻을 수있는 뭔가를 누락 확신 이.

희망 하시겠습니까? 감사. 선택기에

2016-11-16 Ash

사용 :global :

:global(.top) .main___iZy2A { 
    margin-top: 0; 
} 
:global(.down) .main___iZy2A { 
    margin-top: 100px; 
}

또는 :global의 조합 :local 당신이 더 이상 하나의 글로벌 셀렉터가있는 경우 :

:global .top .top--left :local .main___iZy2A { 
    margin-top: 0; 
} 
:global .down .down--right :local .main___iZy2A { 
    margin-top: 100px; 
}

2016-11-16 10:54:01

감사합니다. 나는 그것이 단순 할 것이라고 생각했다. – Ash

답변