简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

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

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

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

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

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

react ビデオ チュートリアル

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

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

1. モジュール スタイル

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

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' とは異なるため、

 
也是用的style，但书写方式不一样了
ログイン後にコピー

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

javascript (ビデオ)

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

関連ラベル：
react スタイル
ソース：php.cn
前の記事：JQuery click() と onclick() の違いは何ですか 次の記事：React の const とは何ですか?
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
React で制御される要素を理解する方法 React で制御された要素を理解するにはどうすればよいですか?状態制御を使用しますか? React で制御された要素を理解するにはどうすればよいですか?状態制御を使用しますか?
から 2023-11-16 14:51:10
0
1
106
タイトルを次のように書き換えました: React と typescript を使用した Vite での動的コンポーネントのインポートにより高速リフレッシュが失敗する マルチステップフォームを作成しようとしていますが、このような定数のデータを別のファイルに入れています import{lazy} from 'react';exportconstst...
から 2023-11-10 20:45:29
0
1
505
エラーが発生しました: npm install && npm run dev の実行中に問題が発生しました - Vite - Laravel UI React 皆さん、こんにちは。今日、問題が発生しました。react を使用して laravelui をインストールし、npminstall ステップに渡すときにエラーが発生しました。そのため...
から 2023-11-10 17:43:07
0
1
278
Laravel 8のブレードアセットを使用して画像を表示しますが、リソースサブフォルダーからロードします 私はLaravelにかなり慣れていないので、ご容赦ください。 Node/Reactで開発したフレームワークをLaravelにコピーしています。現在、メインのアーキテクチャを調整し、...
から 2023-11-09 12:47:02
0
1
314
About Me ページでダウンロードされる chrome-extension:// installHook.js とは何ですか? 最近、Three.js を使用していくつかの Web ページを作成しました。 Chrome でダウンロードされているものを確認すると、installHook.js というファイルが...
から 2023-11-04 23:40:49
0
2
282
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！