React 프로젝트에서 CSS 모듈 구현

CSS의 CSS 모듈은 고유 클래스 이름을 자동으로 생성하여 CSS를 범위로 만드는 방법입니다. 이것은 대규모 응용 프로그램에서 클래스 이름 충돌을 방지하고 모듈 식 스타일을 허용합니다. React 프로젝트에서 CSS 모듈을 사용하는 방법은 다음과 같습니다.

1. 설정

기본적으로 React는 CSS 모듈을 지원합니다. css 파일을 확장자 .module.css.

2. 예제 설정

파일 구조:

button.module.css :

button.js :

src/
├── components/
│   ├── Button.js
│   ├── Button.module.css

작동 방식 :

.button {
  background-color: #6200ea;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.button:hover {
  background-color: #3700b3;
}

button.module.css

import React from 'react';
import styles from './Button.module.css';

const Button = () => {
  return (
    <button className={styles.button}>
      Click Me
    </button>
  );
}

export default Button;

: CSS 규칙을 일반 CSS 파일처럼 정의합니다.

<..> Styles.Button : CSS 모듈의 클래스 이름은 JavaScript 객체로 가져옵니다. Styles.className을 사용하여 참조하십시오

• 이익:
scoped styles : 각 클래스는 구성 요소에 국부적으로 범위를 지정하여 이름 충돌을 피합니다. 관리 가능성 : 응용 프로그램이 커지면 CSS가 모듈 식 상태로 유지되고 관리하기 쉽습니다.

특정 사례에 대한 도움이 필요한지 알려주세요!

위 내용은 React 프로젝트에서 CSS 모듈 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!