.modules를 사용할 때 스타일이 적용되지 않는 문제가 있습니다. Next.js에서

Question

Next.js 13 애플리케이션을 실행했습니다.

main.modules.css 파일이 있습니다

< ;/code> ;

.heading {
    글꼴 크기: 4rem;
    색상: #000;
}

.어두운 .제목 {
    색상: #fff;
}

이런 구성요소의 스타일을 지정하는 데 사용합니다

"@/styles/main.module.scss"에서 스타일 가져오기;

기본 함수 내보내기 Home() {
    반품 (
        <>
            <헤더 />
            <h1 className={styles["heading"]}>안녕하세요! 저는 scss</h1>로 스타일을 지정했습니다.
        </>
    );
}

출처. 제목 클래스의 스타일이 올바르게 적용되었습니다. dark .heading 속성에는 없습니다.

내 테마 제공업체는 HTML 요소에 하나를 추가합니다. 어두운 카테고리.

저는 일반 것을 사용했습니다. scss 파일을 열고 다음과 같은 클래스를 적용하세요

<h1 className="heading">안녕하세요! 저는 scss</h1>

로 스타일을 지정했습니다.

그럼 잘 되더군요

Answer 1

스타일을 사용해 볼 수 있습니다. 제목. < h1 className = {styles.heading} >안녕하세요 제 스타일은 scss입니다</h1>

Answer 2

:global을 사용하여 글로벌 클래스를 사용하고 있음을 선언할 수 있습니다.

그래서 메인입니다. 모듈. scss는

이 됩니다. 으아악

왜 이런 일이 발생하나요?

왜 이런 일이 발생하나요?
CSS 모듈은 사용하는 구성 요소에 따라 범위가 지정됩니다.

이것은 기본적으로 의미합니다. 다크 셀렉터는 컴파일되며 글로벌 셀렉터를 참조하지 않습니다. 어두운 카테고리.