스타일 충돌을 피하기 위해 React에서 구성 요소 범위 CSS를 어떻게 달성할 수 있습니까?

React 컴포넌트의 CSS 범위 지정

문제

ES6를 사용하는 React 애플리케이션에서는 별도의 CSS 파일을 컴포넌트로 가져올 수 있습니다. 그러나 이러한 방식으로 가져오면 CSS가 전역적으로 렌더링되어 모든 구성 요소에 영향을 미치는 경우가 많습니다. 이는 CSS 충돌 및 의도하지 않은 스타일 지정으로 이어질 수 있습니다.

구성 요소 범위 CSS

원하는 동작은 CSS의 범위를 개별 구성 요소로 지정하여 스타일이 해당 구성 요소의 범위 내에서만 적용되도록 하는 것입니다. 이는 스타일이 구성 요소에 대해 "로컬"이어야 하며 구성 요소가 마운트 해제되면 사라져야 함을 의미합니다.

해결책

구성 요소 범위 CSS를 구현하려면 CSS 모듈 또는 유사한 CSS-in 활용을 고려하세요. -JS 패키지. 예를 들어 Emotion, Styled Components 또는 npm의 광범위한 카탈로그 패키지가 있습니다.

예를 들어 CSS 모듈은 클래스 이름과 애니메이션 이름을 로컬로 범위 지정하는 메커니즘을 제공합니다. URL 및 가져오기는 모듈 요청 형식으로 처리됩니다.

CSS 모듈의 예

import React from 'react';
import styles from './styles/button.css';

class Button extends React.Component {
  render() {
    return (
      <button classname="{styles.button}">Click Me</button>
    );
  }
}
export default Button;

CSS 모듈을 사용하면 생성된 CSS는 다음과 같습니다.

.button_3GjDE {
  border-radius: 3px;
  background-color: green;
  color: white;
}

해시 _3GjDE가 포함된 고유한 클래스 이름은 스타일 범위를 버튼으로 지정하여 충돌을 방지합니다. 컴포넌트.

대체 접근 방식

대체 솔루션은 일반 선택기를 피하고 컴포넌트 및 요소에 대해 클래스 기반 명명 규칙을 사용하는 것입니다. 예:

.aboutContainer {
  # Some style
}

.aboutContainer__code {
  # Some style
}

스타일 지정이 필요한 각 요소에는 고유한 클래스 이름이 부여되어 스타일이 특정 구성 요소 내에서만 적용되도록 합니다.

위 내용은 스타일 충돌을 피하기 위해 React에서 구성 요소 범위 CSS를 어떻게 달성할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!