ReactはCSSを導入できますか？

react は css を導入できます。方法: 1. コンポーネント内で直接「style={{css style}}」を使用して css を導入します。2. まず、render 関数で変数を宣言して、スタイル シート バインディングを保存します。 style. 属性に引用符を付けます; 3. 「import 'css path'」を使用して css ファイルを導入します。

このチュートリアルの動作環境: Windows7 システム、react16 バージョン この方法は、すべてのブランドのコンピューターに適しています。

おすすめ学習：「プログラミング動画」

ReactではCSSを導入することができます。ただし、次のようにインラインスタイルを直接記述すると、JSX 構文がサポートされていないため、直接エラーが報告されます。

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

React は、次の 3 つの CSS 記述方法をサポートしています: [関連チュートリアルの推奨事項: React ビデオ チュートリアル ]

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. 宣言スタイル: render 関数で最初に宣言し、次に引用符で囲みます

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

render() {
    let mystyle = {
         width:'200px',
		 height:'80px',
		 backgroundColor:'yellow',    　　　　
		 fontSize:'24px',    　　　　
		 textAlign:'center'   　
    }
    return(
        <div style={mystyle}>
            测试数据
        </div>
    );
}

3. import を使用して外部 CSS スタイル ファイルを導入する

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

import './mystyle.css';

さらに関連記事を読みたい場合は、PHP 中国語 Web サイト にアクセスしてください。 ！

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