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 ステートメントの概要
2048ミニゲーム、参考までに具体的な内容は以下のとおりですまず、2048ゲームは16のグリッドか...
目次使いやすいプロジェクトを作成するvue-cli 作成ヴィートクリエイションvue-routerを...
コードをコピーコードは次のとおりです。 <フォームメソッド="post" ...
この記事では、参考までに、テキストループスクロールを実現するアプレットの具体的なコードを例を挙げて紹...
導入最近、大きな課題をこなす際に、弾幕プレイヤーを作る必要がありました。他の人のソースコードを借りて...
ウェブサイトが悪意を持ってリクエストされた場合、IP アドレスをブラックリストに登録することは重要な...
序文MySQL 5.1.6 以降、非常にユニークな機能であるイベント スケジューラが追加されました。...
昨日、パソコンにPHP開発環境をセットアップした後、Apacheサーバーを再起動するとエラーが続きま...
参考までに、JSを使用してランダム点呼システムを実装します。具体的な内容は次のとおりです。毎回の授業...
この間、プロジェクトに取り組んでいるときに、データ間の接続が非常に複雑なモジュールに遭遇しました。テ...
MySQL バージョン 5.5 および 5.6 を標的とする Riddle 脆弱性により、中間者攻撃...
多くのアプリやウェブサイトでは、ログインやアカウント登録の際にSMS認証コード1を送信する場所があり...
Yahoo チームが書いた、ウェブサイトのパフォーマンス最適化に関する記事を読みました。この記事は...
1. /etc/passwdファイル内のデフォルトシェルが/sbin/nologinではないユーザー...
SSHとは何か管理者はリモートでログインして、インターネット経由で接続されたさまざまな場所にある複数...