반응 구성 요소의 값을 scss로 전달

Question

.jsx 구성 요소에 다음 코드가 있습니다.

으아악

.scss에서 headerContainer 클래스의 목록 모드를 어떻게 사용하나요? 예:

<div className={type === "travellist" ? "headerContainer listmode" : "headerContainer"}>

Answer 1

css-modules와의 관계를 역전할 수 있습니다. Webpack과 같은 빌드 시스템에서 설정하는 것이 좋습니다(예: sass-loader 및 css-loader 플러그인 사용). 그런 다음 클래스 이름을 JavaScript로 가져올 수 있습니다. 기본적으로 각 클래스는 로컬 범위로 지정되지만(즉, 고유한 이름 지정) 사용 가능한 옵션을 사용하여 변경할 수 있습니다.

으아악 으아악