React에서 구성 요소 범위 CSS 가져오기를 어떻게 달성할 수 있나요?

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

소개
많은 React 애플리케이션은 특히 여러 스타일을 처리할 때 CSS 스타일을 관리하는 데 어려움을 겪습니다. 구성 요소. 적절한 격리를 보장하고 전역 스타일을 방지하려면 구성 요소 범위 CSS 가져오기를 구현하는 것이 좋습니다.

CSS 모듈
구성 요소 범위 CSS 가져오기를 달성하는 인기 있는 접근 방식은 CSS를 이용하는 것입니다. 모듈. CSS 모듈을 사용하면 CSS 파일을 가져온 구성 요소 내에서 클래스 이름과 애니메이션 이름의 범위가 자동으로 지정됩니다. URL 및 가져오기도 모듈 요청 구문을 준수하여 스타일이 구성 요소 내에서 격리되도록 합니다.

예제 코드
React 구성 요소와 그에 수반되는 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

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

CSS 이후 변환
CSS 모듈이 변환을 수행한 후 CSS 출력은 다음과 같습니다. like:

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

"_3GjDE" 접미사는 무작위로 생성된 해시를 나타내며 클래스 이름이 구성 요소 내에서 고유하도록 보장합니다.

대체 접근 방식: 클래스 기반 명명 규칙
외부 플러그인을 피하고 싶다면 구성 요소와 요소에 대해 클래스 기반 명명 규칙을 채택할 수 있습니다. 각 요소에 고유한 클래스 이름을 사용하면 구성 요소 격리를 유지할 수 있습니다.

예제 코드

.aboutContainer {
  # Some style
}

.aboutContainer__code {
  # Some style
}

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