React에서 CS를 작성하는 다른 방법-CSS 튜토리얼-php.cn

React에서 CS를 작성하는 다른 방법

William Shakespeare

풀어 주다： 2025-03-13 10:44:09

원래의

294명이 탐색했습니다.

React에서 CS를 작성하는 다른 방법

스타일 시트를 HTML에 연결하는 방법을 알고 있습니다. 반응 단일 페이지 응용 프로그램 (SPA)의 스타일링은 더 많은 옵션을 제공합니다. React의 CSS에 대한 다양한 접근법을 탐색하여 강점과 약점을 강조 해보자.

외부 스타일 시트 가져 오기

이 방법은 전통적인 CSS 링크를 반영합니다.

CSS 파일 (예 : style.css )을 만듭니다.
CSS 규칙을 작성하십시오.
React 구성 요소로 가져옵니다.

 import "./style.css";

로그인 후 복사

예:

 "React"에서 React React;
import "./components/css/app.css";

기능 앱 () {
  반품 (
    <div classname="main"></div>
  );
}

기본 앱 내보내기;

로그인 후 복사

/Components/css 폴더에서 App.css 가져옵니다.

인라인 스타일

유지 관리 가능성 문제로 인해 대규모 프로젝트에 대해 일반적으로 낙담하지만 인라인 스타일은 특정 상황에서 실용적 일 수 있습니다. React의 구성 요소 구조는 일부 유지 보수 문제를 완화시킵니다.

간단한 예 :

<div classname="main" style="{{" color:></div>

로그인 후 복사

보다 조직화 된 접근 방식은 스타일 객체를 사용합니다.

 "React"에서 React React;

기능 앱 () {
  const 스타일 = {
    기본: {
      BackgroundColor : "#f1f1f1",
      너비 : "100%",
    },
    입력 텍스트 : {
      패딩 : "10px",
      색상 : "빨간색",
    },
  };
  반품 (
    <div classname="main" style="{styles.main}"></div>
  );
}

기본 앱 내보내기;

로그인 후 복사

이것은 styles 객체에 정의 된 스타일을 적용합니다. 물체 참조를위한 곱슬 버팀대의 사용에 주목하십시오.

CSS 모듈

CSS 모듈은 로컬로 스코핑 된 클래스 이름을 제공하여 더 큰 응용 프로그램에서 명명 충돌을 방지합니다. 각 구성 요소는 고유 한 클래스 이름을 얻습니다.

.module.css 파일을 만듭니다 (예 : styles.module.css ).
React 구성 요소로 가져옵니다.
className 과 함께 가져온 스타일을 사용하십시오.

 / * Styles.module.css */
.FONT {
  색상 : #F00;
  글꼴 크기 : 20px;
}

로그인 후 복사

 "React"에서 React React;
"./styles.module.css"에서 가져 오는 스타일;

기능 앱 () {
  반품 (
    <h1 classname="{styles.font}">안녕하세요 세계</h1>
  );
}

기본 앱 내보내기;

로그인 후 복사

스타일의 구성 요소

Styled Components는 JavaScript 내에 실제 CSS를 작성하여 스타일링 된 React 구성 요소를 생성하는 방법을 제공합니다. 혜택에는 고유 한 클래스 이름, 동적 스타일 및 더 나은 CSS 조직이 포함됩니다.

설치 : npm install styled-components

가져 오기 : import styled from 'styled-components';

예:

 "React"에서 React React;
"스타일의 구성 요소"에서 스타일이있는 수입;

const 래퍼 = Styled.div`
  너비 : 100%;
  높이 : 100px;
  배경색 : 빨간색;
  디스플레이 : 블록;
`;;

기능 앱 () {
  반품<wrapper></wrapper> ;
}

기본 앱 내보내기;

로그인 후 복사