Reactは感情を使ってCSSコードを書く

Reactは感情を使ってCSSコードを書く

導入:

emotion は JavaScript ライブラリです。emotion を使用すると、JS を書くのと同じように CSS コードを記述できます。 React に emotion をインストールすると、CSS を簡単にカプセル化して再利用できるようになります。 Emotionを使用すると、ブラウザによってレンダリングされるタグに、CSSで始まるロゴが追加されます。次のように: スクリーンショット内の css- で始まるタグは、emotion ライブラリを使用してレンダリングされます。

導入から運用まで、エンジニアリングにおける感情の応用について紹介します。

感情のインストール:

糸を追加 @emotion/react
糸を追加 @emotion/styled

一般的な CSS コンポーネントを追加します。

1. コンポーネントと同じ名前を大文字で始める
2. スタイルの後にはhtmlタグが続きます

//感情を導入する
「@emotion/styled」からstyledをインポートします。
// 感情を使って CSS コンポーネントを作成する const Container = styled.div`
ディスプレイ: フレックス;
flex-direction: 列;
アイテムの位置を中央揃えにします。
最小高さ: 100vh;
`;
//HTML コードで CSS コンポーネントを使用します:
<コンテナ>
//HTML コード</コンテナ>

既存のコンポーネントにスタイルを追加するには:

1. 変数名の最初の文字を大文字にする
2. 既存のコンポーネントをstyledにパラメータとして渡す
3. スタイルコードでパラメータを追加できる

// Card は antd の既存のコンポーネントです const ShadowCard = styled(Card)`
    幅: 40rem;
    最小高さ: 56rem;
    パディング: 3.2rem 4rem;
    境界線の半径: 0.3rem;
    ボックスのサイズ: 境界線ボックス;
    ボックスシャドウ: rgba(0, 0, 0, 0.1) 0 0 10px;
    テキスト配置: 中央;
`;
// インポートされた画像。パラメーターとして直接使用されます。import logo from "assets/logo.svg";

// バックティックはパラメータで渡されたマジック文字列を参照できます const Header = styled.header`
背景: url(${logo}) 繰り返しなし 中央;
パディング: 5rem 0;
背景サイズ: 8rem;
幅: 100%;
`;

共通CSSコンポーネントの抽出

1. バッククォートの前に、汎用パラメータを受け取るために使用できるすべてのパラメータをリストする必要があります。
2. 渡されたパラメータを取得し、props.betweenなどのpropsを使用して取得します。関数の戻り値を使用してCSS属性を割り当てることができます。CSS属性はレンダリングされず、戻り値は未定義になります。

コンテンツの配置: ${(props) => (props.between ? "space-between" : undefined)};

3. CSSセレクターを使用できる
4. 呼び出すときは、通常のjsコンポーネントと同じように使用し、同じパラメータを渡します。

//行コンポーネントを呼び出す <HeaderLeft gap={1}> 
//HTML コード</HeaderLeft>
const HeaderLeft = styled(Row)``;


// Row コンポーネントを定義します export const Row = styled.div<{
  ギャップ?: 数値 | ブール値;
  between?: ブール値;
  marginBottom?: 数値;
}>`
ディスプレイ: フレックス;
アイテムの位置を中央揃えにします。
コンテンツの配置: ${(props) => (props.between ? "space-between" : undefined)};

マージン下部: ${(props) =>

props.marginBottom ? props.marginBottom + "px" : 未定義};

> * {
上マージン: 0 !重要;
マージン下部: 0 !重要;
右マージン: ${(props) =>

typeof props.gap === "number"
    ? props.gap + "rem"
    : プロップギャップ
    ?「2レム」
    : 未定義};
}
`;

感情をインラインスタイルで書く

1. コンポーネントの先頭に次のコードを記述して、現在のコンポーネントに感情インラインスタイルを使用するように通知します。

/* @jsxImportSource @emotion/react */

2. インライン スタイルの形式: css={ /* インライン スタイル コード*/ }

<フォーム css={{ marginBottom: "2rem" }} layout={"inline"}>
// HTML コード</Form>

以上が感情の紹介と活用です。 (#^.^#)

上記は、React が感情を利用して CSS コードを記述する方法の詳細です。React が感情を利用して CSS コードを記述する方法の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • ReactでCSSスタイルを動的に変更する2つの方法の詳細な説明
  • Reactプロジェクトのパッケージ化に基づくCSS参照パスエラーの解決策
  • React は CSS を使用して React アニメーション関数の例を実装します。
  • React で CSS を使用する 7 つの方法 (最も完全な要約)
  • Create React App で CSS モジュールを使用する方法の例
  • create-react-app で CSS モジュールを使用するためのサンプル コード
  • create-react-app を使用して CSS モジュール、SASS、および ANTD を追加する詳細な説明
  • ReactJs の CSS スタイル設定方法
  • ReactでCSSをエレガントに書く方法

<<:  Dockerコンテナの自動終了を停止する方法の詳細な説明

>>:  CentOS 6.4 MySQL 5.7.18 のインストールと設定方法のグラフィックチュートリアル

推薦する

Linux で Spring Boot プロジェクトを開始および停止するためのスクリプトの例

Springboot プロジェクトを開始するには、次の 3 つの方法があります。 1. メインメソッ...

JS 内の Json 文字列 + Cookie + ローカルストレージ

目次1.Json文字列1.1Json構文1.2 例2. クッキー2.1 使い方は? 3. ローカルス...

Linux/Mac MySQL パスワードを忘れた場合の対処方法

Linux/Mac の MySQL パスワードを忘れた場合はどうすればいいですか?心配しないでくださ...

nginx+php実行リクエストの動作原理の詳細な説明

PHPの仕組みまず、よく耳にするcgi、php-cgi、fastcgi、php-fpmの関係を理解し...

Reactにおけるキーの役割の詳細な説明

目次質問: ボタンをクリックすると、スパンの色が赤に変わりますか?上記の問題を分析します。 2番目の...

Docker を使用して Microsoft Sql Server を展開するための詳細な手順

目次1 背景2 コンテナを作成する3 SAパスワードを変更する4 mssql のリンク5. コンテナ...

CSS 向け SASS スタイル プログラミング ガイド

SASS を使用する開発者が増えるにつれて、SASS コードの数に注意する必要があります。 SASS...

MySQLのストレージエンジンの詳細な説明

MySQL ストレージ エンジンの概要ストレージ エンジンとは何ですか? MySQL のデータは、さ...

vue3.0 のウォッチ リスナーの例の詳細な説明

目次序文リスナーと計算プロパティの違いvue3 で watch を使用するにはどうすればいいですか?...

...

Jenkins を使用した Vue プロジェクトのワンクリック パッケージングと公開の実装

目次Jenkinsのインストールインストールポート番号を変更します(デフォルトのポートは8080です...

MySQLは変数を使用してさまざまなソートを実装します

コアコード -- 以下では、MySQLでのソート列の実装を示します -- テストデータ CREATE...

レアタグフィールドセットと凡例の使用方法の詳細な説明

<fieldset>と<legend>については、ほとんどの人はおそらく馴染...

SQLデータベースの14の事例の紹介

データシート /* Navicat SQLite データ転送 ソースサーバー: school ソース...