React에서 CSS를 사용하는 7가지 방법 소개(코드 포함)

이 글은 React에서 CSS를 사용하는 7가지 방법을 소개합니다(코드 포함). 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

첫 번째: 컴포넌트에서 직접 스타일을 사용하세요

컴포넌트가 외부에서 CSS 파일을 가져올 필요 없이 컴포넌트에 직접 작성됩니다.

import React, { Component } from "react";

const div1 = {
  width: "300px",
  margin: "30px auto",
  backgroundColor: "#44014C",  //驼峰法
  minHeight: "200px",
  boxSizing: "border-box"
};

class Test extends Component {
  constructor(props, context) {
    super(props);
  }
 
  render() {
    return (
     <div>
       <div>123</div>
       <div>
     </div>
    );
  }
}

export default Test;<p>참고:<br>1 background-color, box-sizing 및 기타 속성과 같은 일반 CSS에서는 스타일 개체 p1의 속성을 Camel Case, backgroundColor, boxSizing으로 변환해야 합니다. 여백, 너비 등과 같이 하이픈이 없는 속성은 스타일 개체에서 변경되지 않은 상태로 유지됩니다. <br>2. 일반 CSS에서는 CSS 값을 </p>
<pre class="brush:php;toolbar:false">.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

처럼 큰따옴표("")로 묶을 필요가 없습니다. 문자열을 직접 사용하여 스타일을 작성할 수 없으며 오류가 보고됩니다.

<div>
<p> <img src="https://img.php.cn/upload/image/171/466/819/1553917250154517.png" title="1553917250154517.png" alt="React에서 CSS를 사용하는 7가지 방법 소개(코드 포함)"></p>
<p> 하지만 반응 스타일 개체에 사용되는 경우. 값은 큰따옴표로 묶어야 합니다. </p>
<p>이 반응 스타일 방법은 현재 구성 요소에만 적용됩니다. </p>
<p style="white-space: normal;">두 번째: [이름].css 파일을 컴포넌트에 추가하세요</p>
<p>현재 컴포넌트의 시작 부분에 CSS 파일을 추가하려면 가져오기를 사용해야 합니다. </p>
<pre class="brush:php;toolbar:false">import React, { Component } from "react";
import TestChidren from "./TestChidren";
import "@/assets/css/index.css";

class Test extends Component {
  constructor(props, context) {
    super(props);
  }
 
  render() {
    return (
      <div>
        <div>123</div>
        <testchidren>测试子组件的样式</testchidren>
      </div>

    );
  }
}

export default Test;

이렇게 소개된 CSS 스타일은 현재 구성 요소와 모든 하위 구성 요소에 적용됩니다.

세 번째 방법: 3. [name].scss 파일을 구성 요소에 추가합니다

react는 이미 내부적으로 접미사 scss가 있는 파일을 지원하므로 node-sass를 설치하기만 하면 됩니다. 왜냐하면 node-sass, scss 파일이 있기 때문입니다. 노드 환경에서 CSS 파일로 컴파일할 수 있습니다.

>yarn add node-sass

그런 다음 scss 파일을 작성합니다

//index.scss
.App{
  background-color: #282c34;
  .header{
    min-height: 100vh;
    color: white;
  }
}

Sass 사용 방법에 대한 자세한 내용은 Sass 공식 홈페이지를 확인하세요

이렇게 소개된 CSS 스타일은 현재 구성 요소와 모든 하위 구성 요소에도 영향을 미칩니다.

넷째: [이름].module.css 파일을 컴포넌트에 도입하세요

CSS 파일을 모듈로 도입하세요. 이 모듈의 모든 CSS는 현재 컴포넌트에만 영향을 줍니다. 현재 구성 요소의 하위 구성 요소에는 영향을 주지 않습니다.

import React, { Component } from "react";
import TestChild from "./TestChild";
import moduleCss from "./test.module.css";

class Test extends Component {
  constructor(props, context) {
    super(props);
  }  
 
  render() {
    return (
     <div>
       <div>321321</div>
       <testchild></testchild>
     </div>
    );
  }
}

export default Test;

이 방법은 컴포넌트에서 스타일을 사용하는 첫 번째 방법의 업그레이드 버전이라고 볼 수 있습니다. 다른 구성 요소에 영향을 주지 않고 CSS와 구성 요소를 완전히 분리합니다.

다섯 번째 방법: [name].module.scss 파일을 컴포넌트에 추가합니다

네 번째 방법과 유사하지만 차이점은 네 번째 방법은 CSS 모듈을 소개하고 이 방법은 단지 scss 모듈을 소개한다는 것입니다.

import React, { Component } from "react";
import TestChild from "./TestChild";
import moduleCss from "./test.module.scss";

class Test extends Component {
  constructor(props, context) {
    super(props);
  }  
 
  render() {
    return (
     <div>
       <div>321321</div>
       <testchild></testchild>
     </div>
    );
  }
}

export default Test;

같은 방법은 컴포넌트에서 스타일을 사용하는 첫 번째 방법의 업그레이드 버전이라고 볼 수 있습니다.

여섯 번째 방법: styled-comComponents

를 사용하려면 먼저

>yarn add styled-components

를 설치한 다음 js 파일을 만들어야 합니다(css 파일이 아니라 js 파일이라는 점에 유의하세요)

//style.js
import styled, { createGlobalStyle } from "styled-components";

export const SelfLink = styled.p`
  height: 50px;
  border: 1px solid red;
  color: yellow;
`;

export const SelfButton = styled.p`
  height: 150px;
  width: 150px;
  color: ${props => props.color};
  background-image: url(${props => props.src});
  background-size: 150px 150px;
`;

styled-comComponents를 사용하세요 컴포넌트 내 style

import React, { Component } from "react";

import { SelfLink, SelfButton } from "./style";

class Test extends Component {
  constructor(props, context) {
    super(props);
  }  
 
  render() {
    return (
     <div>
       <selflink>app.js</selflink>
       <selfbutton>
          SelfButton
        </selfbutton>
     </div>
    );
  }
}

export default Test;

방법은 전체 CSS 스타일과 html 노드를 하나의 컴포넌트로 병합하는 것입니다. 이 구성 요소를 소개하면 html과 css가 모두 있습니다.
구성 요소에 속성을 전달하여 언제든지 스타일을 동적으로 변경할 수 있다는 장점이 있습니다. 변수, 미디어 쿼리, 의사 클래스 등을 처리하는 데 더 편리합니다.

이 CSS 방법은 현재 구성 요소에만 유효합니다.

구체적인 사용법은 styled-comComponents 공식 홈페이지를 확인해주세요

일곱번째: radius를 사용하려면

먼저

>yarn add radium

를 설치한 후 리액트 컴포넌트에 직접 도입해서 사용해야 합니다

import React, { Component } from "react";
import Radium from 'radium';

let styles = {
  base: {
    color: '#fff',
    ':hover': {
      background: '#0074d9'
    }
  },
  primary: {
    background: '#0074D9'
  },
  warning: {
    background: '#FF4136'
  }
};

class Test extends Component {
  constructor(props, context) {
    super(props);
  }  
 
  render() {
    return (
     <div>
      <button>
        this is a primary button
      </button>
     </div>
    );
  }
}

export default Radium(Test);

변수 처리를 위해 , 미디어 쿼리, 의사 클래스 등은 불편합니다.

Radium을 사용하면 변수, 미디어 쿼리, 의사 클래스 등을 직접 처리할 수 있고, 수학, 연결, 정규식, 조건, 함수 등을 js에서 직접 사용할 수 있습니다.

구체적인 용도는 라듐 공식 홈페이지를 확인해주세요

참고:수출 전 라듐으로 포장해야 합니다.

이 기사는 여기서 끝났습니다. 더 흥미로운 콘텐츠를 보려면 PHP 중국어 웹사이트의 CSS Video Tutorial 칼럼을 주목하세요!