React 프로젝트가 구성 요소 범위의 배경으로 CSS 모듈을 상속해야 하는 이유는 무엇입니까?

Question

React 컴포넌트를 생성했는데 CSS 모듈에서 설정한 본문 스타일을 전체 웹사이트가 상속하는 문제가 있었습니다. 나는 로컬 태그를 사용하거나 사용하지 않고 이것을 시도했는데, 이것이 React가 CSS 모듈을 래핑하는 방식과 관련이 있을 수 있다고 생각합니다. 다른 사람이 같은 문제를 겪는 것을 본 적이 없기 때문입니다.

:로컬 본문
{
    디스플레이: 플렉스;
    내용 정당화: 센터;
    항목 정렬: 중앙;
    최소 높이: 100vh;
    배경: #300d25;
    전환: 0.5초;
}
:로컬 바디::이전
{
    콘텐츠:'';
    위치: 절대;
    상단: 0;
    왼쪽: 0;
    너비: 100%;
    높이: 100%;
    배경: #30bfa5;
    전환: 0.5초;
    클립 경로: 원(가운데 250px);
}

Answer 1

관련 CSS 모듈이 포함된 React 구성 요소를 생성했지만 CSS 모듈 중 하나에서 정의한 스타일이 구성 요소뿐만 아니라 전체 사이트에 영향을 미치는 것 같습니다. 이 문제는 CSS 모듈의 잘못된 사용, 클래스 이름 충돌, 전역 스타일, 철자 오류, 브라우저 확장 또는 CSS 관련 문제로 인해 발생할 수 있습니다. 이 문제를 해결하려면 CSS 모듈의 이름을 올바르게 지정하고 사용하고 있는지 확인하고, 충돌과 오타를 확인하고, 전역 스타일을 검토하고, CSS 재설정 또는 정규화를 사용하고, 적용된 스타일을 확인하고, Webpack 구성을 확인하세요. 문제가 지속되면 특정 문제 해결을 위한 추가 세부 정보를 제공하는 것이 좋습니다.