導入:emotion は JavaScript ライブラリです。emotion を使用すると、JS を書くのと同じように CSS コードを記述できます。 React に emotion をインストールすると、CSS を簡単にカプセル化して再利用できるようになります。 Emotionを使用すると、ブラウザによってレンダリングされるタグに、CSSで始まるロゴが追加されます。次のように: スクリーンショット内の css- で始まるタグは、emotion ライブラリを使用してレンダリングされます。 導入から運用まで、エンジニアリングにおける感情の応用について紹介します。 感情のインストール:糸を追加 @emotion/react 糸を追加 @emotion/styled 一般的な CSS コンポーネントを追加します。 1. コンポーネントと同じ名前を大文字で始める //感情を導入する 「@emotion/styled」からstyledをインポートします。 // 感情を使って CSS コンポーネントを作成する const Container = styled.div` ディスプレイ: フレックス; flex-direction: 列; アイテムの位置を中央揃えにします。 最小高さ: 100vh; `; //HTML コードで CSS コンポーネントを使用します: <コンテナ> //HTML コード</コンテナ> 既存のコンポーネントにスタイルを追加するには: 1. 変数名の最初の文字を大文字にする // 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. バッククォートの前に、汎用パラメータを受け取るために使用できるすべてのパラメータをリストする必要があります。 コンテンツの配置: ${(props) => (props.between ? "space-between" : undefined)}; 3. CSSセレクターを使用できる //行コンポーネントを呼び出す <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 の他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
<<: Dockerコンテナの自動終了を停止する方法の詳細な説明
>>: CentOS 6.4 MySQL 5.7.18 のインストールと設定方法のグラフィックチュートリアル
1. CSS3の三角形は特殊効果でズームし続けます11.1 画像プレビュー 11.2 index.h...
この記事では、25 の有名な Web サイト (Google、Yahoo、Twitter、Digg ...
HTML では、一般的な URL はさまざまな方法で表現されます。相対 URL:コードをコピーコード...
目次序文こんにちは世界画像 境界線の半径を設定する実ピクセルを設定する外部CSSをインポートttfフ...
私はずっとDockerにはIPアドレスがないと思っていました。実はDockerのネットワークテンプレ...
1. Apache 2.4.41 のインストールと設定最初のステップは、以下に示すように、https...
脆弱性の説明Apache Flink は、分散ストリームおよびバッチ データ処理用のオープン ソース...
初めて書きます。自己紹介させてください...みなさんこんにちは。私はジャスミンです。なぜジャスミンと...
この記事では、ショッピングサイトの商品の拡大鏡効果を実現するためのjsの具体的なコードを紹介します。...
目次1. 公式の足場を使って構築する2. プロジェクトディレクトリ分析3. TypeScript の...
テーブルに table-layer:fixed スタイルを設定し、テーブル内の行が結合されていること...
目次参照と反応参照反応的RefとReactiveの違いshallowRef と shallowRea...
1eChartsの基本手順4つのステップ1 DOMコンテナを見つける2 初期化3 設定オプション4 ...
1. ffmpeg がビデオ ファイルをプッシュする場合、オーディオとビデオのエンコード形式は H2...
1. Reactコンポーネントを定義する2つの方法1. 関数コンポーネント。単純な関数コンポーネント...