ReactにCSSを導入する方法

導入方法には、1. インライン スタイル、2. 宣言スタイル、インライン スタイルは似ていますが、唯一の違いは、変数がスタイル シートを保存するために宣言され、スタイル属性にバインドされることです。3. インポートの導入, React コンポーネントは通常 フォルダー であり、そのフォルダーには対応する js と css が含まれており、js に同じレベルの css を導入するだけです。

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

<div style="color:red">测试数据</div> //报错

React では、上記の方法でインライン スタイルを直接記述すると、JSX 構文がサポートされていないため、直接エラーが報告されます。React では、次の 3 つの CSS 記述方法がサポートされています。

# 1. インライン スタイル

...
<div style={{
    width:&#39;200px&#39;,
    height:&#39;80px&#39;,
    backgroundColor:&#39;yellow&#39;,    　　　　
    fontSize:&#39;24px&#39;,    　　　　
    textAlign:&#39;center&#39;   　　　　
}}>测试数据</div>
...

2. 宣言スタイル

宣言スタイルはインライン スタイルと似ていますが、唯一の違いは変数がスタイルシートを保存するために宣言され、style 属性にバインドされます。

...
<div style={{
    width:&#39;200px&#39;,
    height:&#39;80px&#39;,
    backgroundColor:&#39;yellow&#39;,    　　　　
    fontSize:&#39;24px&#39;,    　　　　
    textAlign:&#39;center&#39;   　　　　
}}>测试数据</div>
...

3.インポートの概要

React コンポーネントは通常、対応する js と css を含むフォルダーです。js に同じレベルが導入されている限り、ただのCSS。

import './mystyle.css';

推奨学習:

css ビデオ チュートリアル

以上がReactにCSSを導入する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。