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. 通常の CSS では、background-color、box-sizing、その他の属性など、スタイル オブジェクト p1 の属性は、キャメル ケース、backgroundColor、boxSizing に変換する必要があります。マージン、幅などのハイフンのないプロパティは、スタイル オブジェクト内で変更されません。 <br>2. 通常の 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;
}

3 のように、css の値を二重引用符 ("") で囲む必要はありません。文字列を直接使用してスタイルを記述することはできず、エラーが発生します。

<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;">2 番目: [名前].css ファイルをコンポーネントに導入します</p>
<p>css ファイルを導入するには、現在のコンポーネントの先頭で import を使用する必要があります。 </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 番目の方法: 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スタイルは # にも影響します## 現在のコンポーネントとそのすべての子孫コンポーネント。

4 番目の方法: [名前].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 とコンポーネントを完全に分離します。

5 番目の方法: [name].module.scss ファイルをコンポーネントに導入します

4 番目の方法と同様ですが、4 番目の方法では、 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;

同じ方法は、コンポーネントでスタイルを使用する最初の方法のアップグレード バージョンとみなすことができます。

6 番目: スタイル付きコンポーネントの使用

最初に

>yarn add styled-components

をインストールしてから、js ファイルを作成する必要があります (js ファイルであることに注意してください) 、CSS ファイルではありません)

//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-components スタイルを使用する

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 ノードを 1 つのコンポーネントにマージします。このコンポーネントの導入には html と css の両方があります。

利点は、コンポーネントに属性をアップロードすることで、いつでもスタイルを動的に変更できることです。変数、メディアクエリ、疑似クラスなどを処理する場合に便利です。

CSS のこのメソッドは、現在のコンポーネントに対してのみ有効です。

具体的な使用方法については、styled-components の公式 Web サイトを確認してください。

7 番目の方法: radius を使用します

最初にインストールする必要があります

>yarn add radium

and then 反応コンポーネントに

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 で数学、接続、正規表現、条件、関数などを直接使用することができます。

具体的な使用方法についてはradius公式サイトをご確認ください

注意:

エクスポートする前にRadiumでラップする必要があります。

この記事はここで終了しています。その他の興味深いコンテンツについては、PHP 中国語 Web サイトの

CSS ビデオ チュートリアル 列に注目してください。