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 ステートメントの概要

推薦する

base target="" はフレームを開くためのベースリンクのターゲットを指定します

<base target=_blank> は、基本リンクのターゲット フレームを新しいペ...

vueプロジェクトのマルチ環境設定(.env)の実装

目次マルチ環境構成とは何ですか? また、なぜそれが必要なのですか? .env ファイルはどこで設定さ...

MySQL で誕生日から年齢を計算する複数の方法

以前はMySQLをあまり使用していなかったため、MySQLの機能にあまり詳しくありませんでした。この...

Ubuntu 16.04 で PostgreSQL の起動を設定する方法

PostgreSQL はコンパイルされインストールされるため、起動時に起動するように設定する必要があ...

Docker JVM メモリ使用量の表示

1. Docker コンテナのホスト マシンに入り、指定されたイメージを実行しているコンテナ ID ...

テーブルの動的な色の変更を実現するJavaScript

この記事では、テーブルの動的な色の変更を実現するためのJavaScriptの具体的なコードを参考まで...

Centos7.4 サーバーへの Apache のインストールとインストール プロセス中に発生した問題の解決策

この記事では、CentOS 7.4 サーバーに Apache をインストールする方法と、インストール...

CSSアニメーション属性キーフレームの詳細な説明

コラムを更新してからどれくらい経ったでしょうか?半年ですか?今年の後半は、まさに離陸、つまり文字通り...

href をクリックした後にページがジャンプしないようにするための空のリンクの正しい書き方 # 問題

リンクを使用する必要がある場合もありますが、リンクする必要はありません。onclick イベントを処...

HTML テーブルタグチュートリアル (45): テーブル本体タグ

<tbody> タグは、テーブル本体のスタイルを定義するために使用されます。基本構文 &...

PHP で JSON バックスラッシュを削除する例

1. 「stripslashes($_POST['json']);」メソッドを使用し...

CentOS 7.5 に Docker をインストールする詳細なチュートリアル

Docker入門Docker は、アプリケーションをより速く配信するのに役立つオープンソースのコンテ...

DockerにELKをインストールしてJSON形式のログ分析を実装する方法

ELKとは何ですか? ELK は、Elastic が提供するログ収集およびフロントエンド表示ソリュー...

システムメンテナンスページにリダイレクトするように nginx を設定する

先週末、兄弟プロジェクトはより良いサービスを提供するためにサーバーを拡張する準備をしていました。兄弟...

LinuxにDockerをインストールする(非常に簡単なインストール方法)

最近、かなり暇です。大学4年生として数か月間インターンをしていました。インターンとして、Docker...