ReactのCSSスタイルについてお話しします

Angular,Vueとは異なり,ReactはReactでどのようにスタイルの公式案を書くかはなく,コミュニティの多くの案に頼っている.コミュニティで提供されるシナリオは、CSS Modules、styled-components、styles jsxなど多くあります.
次に、これらのシナリオを詳しく説明します.これらのシナリオを話す前に、まずReactが公式に提供している構築ツールcreate-react-appが構築したプロジェクトでcssを使用する問題について説明します.
create-react-appで作成したプロジェクトをcssファイルに導入する問題
create-react-appを使用してプロジェクトを構築すると、index.js、index.css、App.jsなどのファイルがあり、問題を説明するためにApp 1.jsファイルを新規作成し、ファイルの内容を簡単に削除するためにいくつか変更しました.
index.css

.huisiyuan {
  background: red
}

index.js

import App from './App';
import App1 from './App1';
import './index.css';

ReactDOM.render(
  
    
    
  ,
  document.getElementById('root')
);

App.js

import React, { Component } from 'react';
class App extends Component {
	render() {
		return 
  App
	}
}
export default App;

App1.js

import React, { Component } from 'react';
class App1 extends Component {
	render() {
		return 
  App1
	}
}
export default App1;

index.jsに導入されたindex.cssはブラウザでheadラベルの下に表示されるstyleラベルの下にあるため、index.jsで使用されるコンポーネントはindex.cssのスタイルを使用することができます.
たとえばコンポーネントAppの背景色を赤にしたい場合、index.cssではちょうどこのように設定されていますが、App 1の背景色も赤に変わります.
creat-react-appがプロジェクトを作成した後、importを直接使用してcssファイルを導入する問題について説明し、次にコミュニティで提供されるさまざまなシナリオについて説明します.
CSS Modules
CSS Modulesのコア
CSS Modulesのもっと詳しい紹介はチェン一峰先生のCSS Modulesの使い方のチュートリアルを参考にすることができます.
CSSのルールはグローバルであるため、どのコンポーネントのスタイルルールもページ全体に有効であり、多くの競合を引き起こす可能性があります.たとえば、私が2つのcssファイルを持っていて、それらの中のいくつかのスタイル名が同じであれば、上書きされます.簡単な解決策は、スタイルの名前を複雑にし、重複しないことですが、スタイルが多くなっても重複を避けることが難しく、名前が複雑になります.
CSS Modulesはこの問題を解決し、1つのコンポーネントに導入されたクラスは構築ツールによってコンパイルされた後、ユニークなハッシュ文字列になる.
次はAppコンポーネントです

import React, { Component } from 'react';
import xxx from 'index.css';

class App extends Component {

	render() {
		return 
  App
	}

}

export default App;

上記のcssファイルとは異なり、index.cssファイルはxxxオブジェクトに入力され、xxx.huisiyuanはclassを表します.

.huisiyuan {
  background: red;
}

構築ツールはxxx.huisiyuanをハッシュ文字列にコンパイルし、同じindex.cssファイルの.huisiyuanも同じハッシュ文字列にコンパイルし、このクラス名はユニークになります.
このように、このクラスにはローカルドメインの概念があり、コンパイルされたハッシュ文字列の他のコンポーネントは知らないため、他のコンポーネントがこのindex.cssファイルを使用しないと、このクラスのスタイルに適用されません.
一般的には、
ローカルスタイルファイル
グローバルスタイルファイル
ネーミング方式
xxx.module.css
xxx.css
導入方式
import xxx from './xxx.mouule.css'
import './xxx.css'
使い方
huisiyuan
huisiyuan
styled-components
styled-components見名知義はスタイル付きコンポーネントである.
Reactのコンセプトの1つはall in JSで、styled-componentsはスタイルをコンポーネントに直接書き込み、スタイルのコンポーネントを得て、コンポーネントを呼び出すときにスタイルを持っています.
Styled Componentはreactのサードパーティライブラリであり、CSS in JSの優れた実践と代表であり、CSSをJSに書くことで、従来のCSSでは処理しにくい論理複雑、関数方法、多重化、干渉を避けることができる.
使用方法:
まずstyle-components,npm install style-components --saveを取り付ける.
次のコードでは、Divはスタイル付きコンポーネント(スタイル付きDiv)です.

import React, { Component } from 'react';
import styled from 'styled-components';

const Div = styled.div`
	color: red;
`;

class App extends Component {

	render() {
		return (
			

				
hello world
			
		) 
	}

}

export default App;

右の図からstyled-componentsはdivにclassを自動的に追加したことがわかります.
styled-componentsは、コンポーネントのプロパティを取得し、スタイルを定義するときにいくつかの論理操作を行うこともできます.

const Div1 = styled.div`
	color: red;
	${(props)=> props.big&&`
		font-size: 72px
		`}
`;

const Div2 = styled.div`
	color: blue;
	${(props)=> props.small&&`
		font-size: 30px
		`}
`;

class App extends Component {
	render() {
		return (
			

				hello world
				hello world
			
		) 
	}
}

Div 1コンポーネントにbig属性がある場合、font-size: 72pxが設定され、結果は下図のようになります.
styled jsx
見名知義はスタイル付きJSXで、一般的には次の3つの形式があります.
1)行内スタイル
行内スタイルは最も基本的な書き方で、HTMLに書かれている要素とのインラインスタイルの差は多くありませんが、設定されているスタイルはオブジェクトです.

hello

 
 
          ？
 
 
   JSX    JS   ，             ，{style}      JS  。           JS     JSX  ，              style    ，     style            。
 
 
2）    
 
 
                  ， render      style  ，       ， css      。
 
 
const style = {
	color: red,
	background: blue
}

class App extends Components {
	render() {
		return (
			
hello
		)
	}
}
3)スタイルファイルの  
 はこれはCSS Modulesの のグローバルスタイルファイルの  で、ここでもう   って、 い は   に  で、スタイルファイルをimport を じて  して、  はページの のすべてのコンポーネントがこのファイルの のスタイルを  することができます.
App.css 
.huisiyuan {
  color: red;
  background: blue;
}
App.js 
import React, { Components } from 'react';
import './App.css';
import  App1 from './App1';

class App extends Components {
	render() {
		return (
      
		)
	}
}
APP1.js 
import React, { Components } from 'react'; 

class App1 extends Components {
	render() {
		return (
      
hello
		)
	}
}
App.jsにはApp.cssが  されていますが、App 1.jsには・  されていませんが、App 1コンポーネントの  では  としてApp.cssのスタイルが  でき、App 1コンポーネントのhelloにはApp.cssのスタイルが  されます.
まとめ:
  まとめた3つの  は、CSS Modulesやstyled-componentsを  して、  から さなdemoを るときにstyled jsxを  する  をお めします.
 わったら、   なところがあれば  してください.