スタイルの設計

コンポーネントベースの開発では、適切なcssソリューションを選択することが特に重要です。

通常、以下のルールに従います：

ローカルな css を書くことができ、他のコンポーネント内のネイティブな css を無作為に汚染しません。
動的な css を書くことができ、現在のコンポーネントのいくつかの状態を取得し、状態の変化に応じて異なる css スタイルを生成できます。
すべての css の特徴をサポートします：疑似クラス、アニメーション、メディアクエリなど。
書きやすく、一貫した css スタイルの特徴に合致するようにすることが望ましい

この点において、vueはcssをより簡潔に使用します：

style タグを使用してスタイルを書く
scoped 属性でスタイルがローカルに有効かどうかを決定する
lang 属性でプリプロセッサを設定する
最新の状態に基づいてスタイルを設定および変更するためのインラインスタイルの方法

一方、reactでは、Vueほど簡潔で便利にCSSを導入することはできません。CSSの導入方法はさまざまで、それぞれ利点と欠点があります。

2. 方法#

一般的なCSSの導入方法は以下の通りです：

コンポーネント内で直接使用する
コンポーネント内で.css ファイルをインポートする
コンポーネント内で.module.css ファイルをインポートする
CSS in JS

コンポーネント内で直接使用する#

コンポーネント内でcssスタイルを直接記述し、style属性を使用して直接インポートします。以下のようになります：

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 style={div1}>123</div>
       <div style={{backgroundColor:"red"}}>
     </div>
    );
  }
}

export default Test;

上記の例では、cssプロパティをキャメルケースに変換する必要があります。

この方法の利点：

インラインスタイルで、スタイル間に衝突がありません
現在の state の状態を動的に取得できます

欠点：

書き方にはキャメルケースの識別子を使用する必要があります
一部のスタイルにはヒントがありません
大量のスタイル、コードの混乱
一部のスタイルを書くことができません（疑似クラス / 疑似要素など）

コンポーネント内で.css ファイルをインポートする#

cssを別のファイルに分けて書き、コンポーネント内で直接インポートします。

App.cssファイル：

.title {
  color: red;
  font-size: 20px;
}

.desc {
  color: green;
  text-decoration: underline;
}

コンポーネントでインポート：

import React, { PureComponent } from 'react';

import Home from './Home';

import './App.css';

export default class App extends PureComponent {
  render() {
    return (
      <div className="app">
        <h2 className="title">私はAppのタイトルです</h2>
        <p className="desc">私はAppのテキストの説明です</p >
        <Home/>
      </div>
    )
  }
}

この方法の問題点は、スタイルがグローバルに適用され、スタイル間に影響があることです。

コンポーネント内で.module.css ファイルをインポートする#

cssファイルをモジュールとしてインポートし、そのモジュール内のすべてのcssが現在のコンポーネントにのみ適用されるようにします。現在のコンポーネントの子孫コンポーネントには影響しません。

この方法はwebpackの特徴であり、webpackの設定ファイルでmodules:trueを設定するだけです。

import React, { PureComponent } from 'react';

import Home from './Home';

import './App.module.css';

export default class App extends PureComponent {
  render() {
    return (
      <div className="app">
        <h2 className="title">私はAppのタイトルです</h2>
        <p className="desc">私はAppのテキストの説明です</p >
        <Home/>
      </div>
    )
  }
}

この方法はローカルスコープの問題を解決できますが、いくつかの欠点もあります：

参照するクラス名にはハイフン（.xxx-xx）を使用できず、JavaScript では認識されません
すべての className は {style.className} の形式で書く必要があります
一部のスタイルを動的に変更するのは簡単ではなく、インラインスタイルの方法を使用する必要があります

CSS in JS#

CSS-in-JS は、CSSを外部ファイルではなくJavaScriptで生成するモードを指します。

この機能は React の一部ではなく、サードパーティライブラリによって提供されます。例えば：

styled-components
emotion
glamorous

以下では、styled-componentsの基本的な使用方法を見ていきます。

本質的には、関数の呼び出しによって、最終的にコンポーネントが作成されます：

このコンポーネントには自動的に重複しないクラスが追加されます
styled-components は、そのクラスに関連するスタイルを追加します

基本的な使用方法は次のとおりです：

スタイルコンポーネントを保存するためのstyle.jsファイルを作成します：

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

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

スタイルコンポーネントをインポートするのも簡単です：

import React, { Component } from "react";

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

class Test extends Component {
  constructor(props, context) {
    super(props);
  }  
 
  render() {
    return (
     <div>
       <SelfLink title="People's Republic of China">app.js</SelfLink>
       <SelfButton color="palevioletred" style={{ color: "pink" }} src={fist}>
          SelfButton
        </SelfButton>
     </div>
    );
  }
}

export default Test;

3. 違い#

上記の 4 つのスタイルのインポート方法を見ると、次のことがわかります：

cssを直接コンポーネント内で使用する方法は、書きやすく、状態に応じてスタイルプロパティを変更することができますが、大量のコードを書くとコードが混乱する可能性があります。
コンポーネント内で.css ファイルをインポートする方法は、日常の書き方に合致していますが、スタイルはグローバルに適用され、スタイルが重なり合う可能性があります。
.module.css ファイルをインポートする方法は、ローカルスコープの問題を解決できますが、いくつかのスタイルを動的に変更するのは簡単ではなく、インラインスタイルの方法を使用する必要があります。
CSS in JS の方法は、ほとんどのシナリオに適用でき、スタイルのネスト、定義、状態の変更などを行うことができます。

reactでどの方法を使用するかは、絶対的な答えはありません。状況に応じて適切な方法を選択することができます。