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

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

외부 스타일 시트 가져 오기

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

1. CSS 파일 (예 : style.css )을 만듭니다.
2. CSS 규칙을 작성하십시오.
3. 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 모듈은 로컬로 스코핑 된 클래스 이름을 제공하여 더 큰 응용 프로그램에서 명명 충돌을 방지합니다. 각 구성 요소는 고유 한 클래스 이름을 얻습니다.

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

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

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

기능 앱 () {
  반품 (
    <h1 id="안녕하세요-세계">안녕하세요 세계</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> ;
}

기본 앱 내보내기;

조건부 스타일

Styled Components를 사용하면 CSS 내에서 소품을 사용하여 조건부 스타일링을 허용하므로 구성 요소 상태 또는 소품을 기반으로 동적 스타일 변경이 가능합니다. 이 예제는 조건부 스타일을 위해 3 배 연산자를 사용합니다.

(조건부 스타일링을 보여주는 예제 코드는 간결하게 생략되었지만 개념은 설명됩니다.)

결론

React는 다양한 CSS 스타일 옵션을 제공합니다. 최상의 접근 방식은 프로젝트 규모, 복잡성 및 개인 선호도에 따라 다릅니다. 이 개요는 RECT 프로젝트에 적합한 방법을 선택하기위한 탄탄한 기반을 제공합니다.

위 내용은 React에서 CS를 작성하는 다른 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!