1. インラインスタイル利点: この方法は比較的シンプルで明確であり、タグにスタイル属性を追加します。 デメリット: この方法では、プロジェクト構造が肥大化し、CSS の名前付けの競合が発生する可能性があります。 React をインポートします。{ コンポーネント } を 'react' からインポートします。 'prop-types' から PropTypes をインポートします エクスポートデフォルトクラスインデックスはComponentを拡張します{ 静的プロパティタイプ = { タイトル: PropTypes.文字列 } 与える() { const h1Style={textAlign:'center',marginBottom:'20px',lineHeight:'35px', 高さ:'30px'} const {title} = this.props 戻る ( <div> <h1 style={h1Style}>{タイトル}</h1> <hr/> </div> ) } } 2. インポート方法を使用する利点: この方法は、CSSの外部導入と同様に、より柔軟に使用できます。 デメリット: Reactスタイルはデフォルトでグローバルなので、スタイルの競合が発生する可能性がある 使用方法: 新しい CSS ファイルを作成し、jsx 構文の className 属性を使用してクラス名を設定し、CSS でクラス名を使用します。このメソッドでは、変数を定義して三項式を使用してクラス名を選択できます。 React をインポートします。{ コンポーネント } を 'react' からインポートします。 「./index.css」をインポートします エクスポートデフォルトクラスインデックスはComponentを拡張します{ 状態={ フラグ:true } 色の変更=()=>{ this.setState((状態、プロパティ)=>{ 戻る { フラグ:!state.flag } }) } 与える() { const {flag} = this.state 戻る ( <div> <h1 className={flag?'blueColor':'redColor'}>髪が白くなるまで待たないでください</h1> <button onClick={this.changeColor} className="btnStyle">クリックしてフォントの色を変更します</button> </div> ) } } .blueColor{ 色: 青; } .redColor{ 色: 赤; } .btnスタイル{ 幅: 260ピクセル; 高さ: 50px; 背景色: 水色; 色: #fff; 境界線:なし; フォントサイズ: 28px; 境界線の半径: 10px; } 3.cssモジュールのエクスポート利点: 名前の競合がなく、スタイルはローカルでのみ有効です デメリット: 面倒すぎる。モジュールは毎回インポートおよびエクスポートする必要があり、これはすべての CSS クラス名をオブジェクトの属性として扱うのと同じです。オブジェクト属性が必要な場合は、オブジェクト属性を呼び出してクラス名を呼び出します。CSS の競合を解決する方法は、Vue でスタイルにモジュールを設定するのと同様に、異なるクラス名にプレフィックスを追加することです。 使用:
「react」からReact、{FC、useState}をインポートします。 「@/components1/cmittem」からCmittemをインポートします。 「./cmtlist.module.scss」から cssObj をインポートします。 定数コマンドリスト:FC<{}>=(props)=>{ 戻る ( <div> <h1 className={cssObj.title}>コメントリスト</h1> </div> ) } デフォルトの Cmtlist をエクスポートする 4. スタイル付きコンポーネントを使用する利点: テンプレート文字列タグ + スタイルの組み合わせは、大文字で始まるコンポーネントです。たとえば、React 開発で最も人気のある記述方法のいくつかを統合していると言えます。React 開発者にとって、これは非常に良いスタートです。そのため、React コンポーネントでは、開発者によって外部 CSS またはコンポーネント CSS を使用する習慣が異なります。 使用: styled-componentsをインストールする必要がある npm i styled-components または yarn add styled-components 簡単に書けるvscodeインストールプラグイン 4.1 初回使用'antd/dist/antd.less' をインポートします 'styled-components' から styled をインポートします 関数App() { const HomeWrapper = styled.div` フォントサイズ:50px; 色:赤; スパン{ 色:オレンジ; &。アクティブ{ 色:緑; } &:ホバー{ 色:青; フォントサイズ:40px; } &::後{ 内容:'ssss' } } ` 戻る ( <div className="アプリ"> <h1>私はタイトルです</h1> <ホームラッパー> <h2>私はサブタイトルです</h2> <span>カルーセル 1</span> <span className="active">カルーセル 2</span> <span>カルーセル 3</span> <span>カルーセル 4</span> </ホームラッパー> </div> ); } デフォルトのアプリをエクスポートします。 4.2 attrs による属性の設定'antd/dist/antd.less' をインポートします 'styled-components' から styled をインポートします 関数App() { const ChangeInput = styled.input.attrs({ プレースホルダー:'wangsu', bgColor:'赤' })` 背景色:#7a7ab4; 色:${props=>props.bgColor} ` 戻る ( <div className="アプリ"> <h1>私はタイトルです</h1> <ChangeInput タイプ="テキスト"/> </div> ); } デフォルトのアプリをエクスポートします。 4.3 CSS継承React をインポートします。{ コンポーネント } を 'react' からインポートします。 'styled-components' から styled をインポートします const HYbutton = styled.button` 色:赤; 境界線:1px実線 #ccc; パディング:10px 20px; ` //ここでは継承を使用します const XLbutton = styled(HYbutton)` 背景色:青; ` デフォルトクラス Button をエクスポートし、Component を拡張します { 与える() { 戻る ( <div> <HYbutton>これはボタンです</HYbutton> <XLbutton>これは継承されたボタンです</XLbutton> </div> ) } } 最近、プロジェクトを開発するときにこの方法を使用しています。とても斬新な感じがします。コミュニティでは議論がありますが、個人的にはこの CSS 設定方法が気に入っています。グローバル スタイルの問題をまったく考慮する必要がありません。 以上がReactでCSSをエレガントに書く方法の詳細です。ReactでCSSを書く方法の詳細については、123WORDPRESS.COMの他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
<<: Windows Server 2012 または 2016 でディスクなしで .NET Framework 3.5 をインストールできない問題に対する完璧なソリューション
>>: MySQL の一般的な SQL ステートメントの概要
<base target=_blank> は、基本リンクのターゲット フレームを新しいペ...
目次マルチ環境構成とは何ですか? また、なぜそれが必要なのですか? .env ファイルはどこで設定さ...
以前はMySQLをあまり使用していなかったため、MySQLの機能にあまり詳しくありませんでした。この...
PostgreSQL はコンパイルされインストールされるため、起動時に起動するように設定する必要があ...
1. Docker コンテナのホスト マシンに入り、指定されたイメージを実行しているコンテナ ID ...
この記事では、テーブルの動的な色の変更を実現するためのJavaScriptの具体的なコードを参考まで...
この記事では、CentOS 7.4 サーバーに Apache をインストールする方法と、インストール...
コラムを更新してからどれくらい経ったでしょうか?半年ですか?今年の後半は、まさに離陸、つまり文字通り...
リンクを使用する必要がある場合もありますが、リンクする必要はありません。onclick イベントを処...
<tbody> タグは、テーブル本体のスタイルを定義するために使用されます。基本構文 &...
1. 「stripslashes($_POST['json']);」メソッドを使用し...
Docker入門Docker は、アプリケーションをより速く配信するのに役立つオープンソースのコンテ...
ELKとは何ですか? ELK は、Elastic が提供するログ収集およびフロントエンド表示ソリュー...
先週末、兄弟プロジェクトはより良いサービスを提供するためにサーバーを拡張する準備をしていました。兄弟...
最近、かなり暇です。大学4年生として数か月間インターンをしていました。インターンとして、Docker...