ホームページ > ウェブフロントエンド > jsチュートリアル > React にスタイルを導入する方法

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

coldplay.xixi
リリース: 2020-12-02 17:32:20
オリジナル
9521 人が閲覧しました

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

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

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

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 &#39;./index.css&#39;;
ログイン後にコピー

index.css

@import &#39;~antd/dist/antd.css&#39;;
.topHead {
    width: 100%;
    height: 100px;
    display: flex;  
    align-items: center;
}
.back{
    background-image: url(&#39;/images/homeBackImg.png&#39;);
}
.levelSize{
    width: 80px;
    height: 80px; 
}
.levelColor{
    color:#ffffff;
}
ログイン後にコピー

2.インラインスタイル

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

 <Divider style={{margin:&#39;0px&#39;}}/>
也是用的style,但书写方式不一样了
ログイン後にコピー

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

javascript (ビデオ)

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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート