내 React 애플리케이션에서 구성 요소 범위 CSS를 어떻게 보장할 수 있나요?

React에서 구성 요소 범위 CSS 가져오기

CSS를 React 구성 요소로 가져오는 것은 스타일링에 필수적이지만 구성 요소 범위 스타일을 보장하는 것은 어려울 수 있습니다. . 귀하의 경우 CSS를 특정 구성 요소 내의 요소에만 적용하고 구성 요소가 마운트 해제되면 사라지기를 원합니다.

한 가지 접근 방식은 React에서 구성 요소 범위 스타일을 달성하는 데 널리 사용되는 기술인 CSS 모듈을 사용하는 것입니다. . CSS 모듈을 사용하면 지정된 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;

/* ./styles/button.css */
.button {
  border-radius: 3px;
  background-color: green;
  color: white;
}

CSS 모듈을 사용하면 생성된 CSS는 무작위로 생성된 해시 값을 포함하여 각 구성 요소에 대해 고유한 클래스 이름을 보장합니다. 이렇게 하면 구성 요소 간의 스타일 충돌을 방지할 수 있습니다.

대체 접근 방식은 일반 선택기를 피하고 구성 요소와 요소에 대해 클래스 기반 명명 규칙을 채택하는 것입니다. 예:

.aboutContainer {
  # Some style
}

.aboutContainer__code {
  # Some style
}

모든 요소에 고유한 클래스 이름을 할당하면 CSS 모듈에 의존하지 않고도 스타일 충돌을 방지할 수 있습니다.

위 내용은 내 React 애플리케이션에서 구성 요소 범위 CSS를 어떻게 보장할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!