ReactでCSSをエレガントに書く方法

ReactでCSSをエレガントに書く方法

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 でスタイルにモジュールを設定するのと同様に、異なるクラス名にプレフィックスを追加することです。

使用:

  • CRAスキャフォールディングでは、CSSスタイルが親コンポーネントに導入されている限り、このスタイルはグローバルスタイルになります。
  • モジュール性を利用してReactのスタイルの競合を解決する
  • craスキャフォールディングでは、スタイルファイルをモジュール化する必要がある場合は、スタイルファイルにxx.module.css/xx.module.scssという名前を付けます。

「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の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • Amap を使用した React 実装例 (react-amap)
  • Reactの仮想DOMとdiffアルゴリズムの詳細な説明
  • ファイルのアップロードの進行状況を示す React の例
  • React で遅延読み込みを使用して最初の画面の読み込み時間を短縮する方法
  • WeChat公式アカウントでReactプロジェクトを実行する方法
  • 最も単純な ErrorBoundary コンポーネントをカプセル化して、React 例外を処理する
  • React Fiber構造の作成手順
  • React の 3 つの主要属性における Ref の使用に関する詳細な説明
  • Reactのようなフレームワークをゼロから作成する
  • React useEffect の理解と使用

<<:  Windows Server 2012 または 2016 でディスクなしで .NET Framework 3.5 をインストールできない問題に対する完璧なソリューション

>>:  MySQL の一般的な SQL ステートメントの概要

推薦する

2048 ゲームを実装するためのネイティブ js

2048ミニゲーム、参考までに具体的な内容は以下のとおりですまず、2048ゲームは16のグリッドか...

vue3+TypeScript+vue-routerの使い方

目次使いやすいプロジェクトを作成するvue-cli 作成ヴィートクリエイションvue-routerを...

ボタンを使用してフォームを送信する代わりに、画像を使用してフォームを送信します。

コードをコピーコードは次のとおりです。 <フォームメソッド="post" ...

テキストの円形スクロールアニメーションを実装するミニプログラム

この記事では、参考までに、テキストループスクロールを実現するアプレットの具体的なコードを例を挙げて紹...

HTMLはキャンバスを使用して箇条書きスクリーン機能を実装します

導入最近、大きな課題をこなす際に、弾幕プレイヤーを作る必要がありました。他の人のソースコードを借りて...

nginx ip ブラックリストの動的禁止の例

ウェブサイトが悪意を持ってリクエストされた場合、IP アドレスをブラックリストに登録することは重要な...

MySQL スケジュールタスク例チュートリアル

序文MySQL 5.1.6 以降、非常にユニークな機能であるイベント スケジューラが追加されました。...

Win7 で IIS7 Web および FTP サービスを完全にアンインストールする方法

昨日、パソコンにPHP開発環境をセットアップした後、Apacheサーバーを再起動するとエラーが続きま...

JS はランダム点呼システムを実装します

参考までに、JSを使用してランダム点呼システムを実装します。具体的な内容は次のとおりです。毎回の授業...

MySql データベースにおける単一テーブル クエリと複数テーブル結合クエリの効率の比較

この間、プロジェクトに取り組んでいるときに、データ間の接続が非常に複雑なモジュールに遭遇しました。テ...

MySQL がユーザー名とパスワードの漏洩を引き起こす可能性のある Riddle の脆弱性を公開

MySQL バージョン 5.5 および 5.6 を標的とする Riddle 脆弱性により、中間者攻撃...

JavaScriptを使用してSMS認証コード間隔を送信する機能を実装する

多くのアプリやウェブサイトでは、ログインやアカウント登録の際にSMS認証コード1を送信する場所があり...

ウェブサイトのフロントエンドパフォーマンスの最適化: JavaScript と CSS

Yahoo チームが書いた、ウェブサイトのパフォーマンス最適化に関する記事を読みました。この記事は...

Linuxテキスト処理ツールの詳細な説明

1. /etc/passwdファイル内のデフォルトシェルが/sbin/nologinではないユーザー...

Linux での SSH 非秘密通信の実装

SSHとは何か管理者はリモートでログインして、インターネット経由で接続されたさまざまな場所にある複数...