DOM에 직접 액세스하여 CSS 모듈 클래스 이름 적용

Question

babel-plugin-react-css-modules 플러그인을 통해 CSS 모듈을 사용하는 구성 요소가 있습니다.

구성 요소가 수명을 다투는 동안 DOM에 직접 액세스하여 새로운 치수를 계산할 수 있기를 원합니다.

내 SCSS 스타일 시트에는 계산을하고 다시 제거하기 위해 구성 요소의 DOM 요소에 적용하려는 .full-width이라는 클래스가 있습니다.

이제 클래스를 추가하고 나중에 그 부분을 제거하면 구성 요소 나 그 상태에 영향을 미치지 않기 때문에 DOM에 직접 액세스하여 클래스를 추가하고 제거하고 싶지는 않습니다. 구성 요소의 state. I 클래스 full-width가 추가됩니다 this.DOMReference.classList.add('full-width'); 할,하지만 난 styleName="full-width"

(예를 Component__full-width___Pjd10을 위해) 한 경우 적용 할 것 같이 클래스의 모듈화 된 버전을 추가 할 경우

방법이 있나요 .full-width을 글로벌 선언으로 지정하지 않고이 작업을 수행 하시겠습니까?

react-css-modules으로이 작업을 수행 할 수 있습니까?

Answer 1

글쎄, 내가 예를

import styles from './styles.scss' 대신 import './styles.scss'를 들어, 대신 익명의 변수에 따라 스타일을 가져올 수 있습니다 후 나는 또한

this.DOMReference.classList.add(styles['full-width']);

로 사용할 수 있습니다 실현 styleName="styles.someClass"을 사용할 필요가 없습니다. 단지 styleName="someClass"을 사용할 수 있습니다 (가져온 스타일 시트 파일이 하나 뿐인 경우).

이 작업을 수행하는 더 좋은 방법을 알려드립니다.