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

react でスタイルを導入する方法: 1. モジュール スタイル、導入方法 [import './index.css';]; 2. インライン スタイル、コードは []。

#関連する学習の推奨事項:

react ビデオ チュートリアル

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

react にスタイルを導入する方法:

1. モジュール スタイル

最初にフレームワークを構築するとき、これからライティングを始めようとしているのですが、最初のページでスタイルをどうやって導入するかという問題に遭遇しますが、いくつか落とし穴がありました スタイルを使う代わりに、ヘッダーに名前を付ける必要はなく、CSSを直接​​導入するだけで済みます 導入方法

<div className=&#39;topHead back fs14&#39;>
     <img src=&#39;/images/highLevel.png&#39; className=&#39;levelSize&#39;/>
</div>

classNameの形式を使用します

導入メソッド

import './index.css';

index.css

@import '~antd/dist/antd.css';
.topHead {
    width: 100%;
    height: 100px;
    display: flex;  
    align-items: center;
}
.back{
    background-image: url('/images/homeBackImg.png');
}
.levelSize{
    width: 80px;
    height: 80px; 
}
.levelColor{
    color:#ffffff;
}

2.インラインスタイル

インライン スタイルは通常の style='margin:0px' とは異なるため、

 <Divider style={{margin:&#39;0px&#39;}}/>
也是用的style，但书写方式不一样了

関連する無料学習の推奨事項:

javascript (ビデオ)

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