ReactにCSSスタイルを導入する方法

React に CSS スタイルを導入する方法: まず、[render() {let mystyle = {}}] などのレンダリング関数でスタイルを宣言し、次に [return(3318bda0f65a78205dbdf347bd94bb4016b28748ea4df4d9c2150843fecfba68);]。

#この記事の環境: Windows10、react16&&css3 バージョン、Dell G3 コンピューター。

(学習ビデオ共有:

react ビデオ チュートリアル )

React には、CSS スタイルを導入する 3 つの方法があります:

1. インライン スタイル:コンポーネント 内部定義

<div style={{width:&#39;20px&#39;,height:&#39;30px&#39;}}>
    First Way!
</div>

2. 宣言スタイル: render 関数内で最初に宣言し、次にそれを参照します

render() {
    let mystyle = {
         width:'20px',
         height:'30px'
    }

    return(
        <div style={mystyle}>
            Second Way!
        </div>
    );
}

3. スタイルの導入: 通常の CSS である外部 CSS ファイルを導入します。コンポーネント js の import ステートメントの後に次のステートメントを追加します。

requre('./mystyle.css');

関連する推奨事項:

js チュートリアル

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