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 のインストールと設定方法のグラフィックチュートリアル

推薦する

CSS3は三角形の連続拡大効果を実現します

1. CSS3の三角形は特殊効果でズームし続けます11.1 画像プレビュー 11.2 index.h...

有名なウェブサイトのロゴに使われている25種類のフォントのコレクション

この記事では、25 の有名な Web サイト (Google、Yahoo、Twitter、Digg ...

HTML Web ページにおける URL の表現

HTML では、一般的な URL はさまざまな方法で表現されます。相対 URL:コードをコピーコード...

uniapp エントリーレベル nvue クライミングピット記録の分析

目次序文こんにちは世界画像 境界線の半径を設定する実ピクセルを設定する外部CSSをインポートttfフ...

DockerコンテナのIPアドレスを表示する方法

私はずっとDockerにはIPアドレスがないと思っていました。実はDockerのネットワークテンプレ...

Windows 10 に Apache 2.4.41 をインストールするチュートリアル

1. Apache 2.4.41 のインストールと設定最初のステップは、以下に示すように、https...

Apache Flink の任意の Jar パッケージのアップロードにより、リモート コード実行の脆弱性が再発する問題が発生する (脆弱性警告)

脆弱性の説明Apache Flink は、分散ストリームおよびバッチ データ処理用のオープン ソース...

Docker デプロイメントサービスの落とし穴を登る過程の詳細

初めて書きます。自己紹介させてください...みなさんこんにちは。私はジャスミンです。なぜジャスミンと...

jsはショッピングウェブサイトの商品の拡大鏡効果を実現します

この記事では、ショッピングサイトの商品の拡大鏡効果を実現するためのjsの具体的なコードを紹介します。...

Vue の新しいパートナー TypeScript クイックスタート実践記録

目次1. 公式の足場を使って構築する2. プロジェクトディレクトリ分析3. TypeScript の...

HTMLは無効なテーブル幅設定の問題を解決します

テーブルに table-layer:fixed スタイルを設定し、テーブル内の行が結合されていること...

Vue3.0 における Ref と Reactive の違いの詳細な分析

目次参照と反応参照反応的RefとReactiveの違いshallowRef と shallowRea...

Echarts 基本入門: 棒グラフと折れ線グラフの一般的な構成

1eChartsの基本手順4つのステップ1 DOMコンテナを見つける2 初期化3 設定オプション4 ...

ffmpeg 中国語パラメータの説明と使用例

1. ffmpeg がビデオ ファイルをプッシュする場合、オーディオとビデオのエンコード形式は H2...

React クラスコンポーネントのライフサイクルと実行順序

1. Reactコンポーネントを定義する2つの方法1. 関数コンポーネント。単純な関数コンポーネント...