導入: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 のインストールと設定方法のグラフィックチュートリアル
Springboot プロジェクトを開始するには、次の 3 つの方法があります。 1. メインメソッ...
Linux 仮想マシン: VMware + Ubuntu 16.04.4 Windows ネイティブ...
目次1.Json文字列1.1Json構文1.2 例2. クッキー2.1 使い方は? 3. ローカルス...
Linux/Mac の MySQL パスワードを忘れた場合はどうすればいいですか?心配しないでくださ...
PHPの仕組みまず、よく耳にするcgi、php-cgi、fastcgi、php-fpmの関係を理解し...
目次質問: ボタンをクリックすると、スパンの色が赤に変わりますか?上記の問題を分析します。 2番目の...
目次1 背景2 コンテナを作成する3 SAパスワードを変更する4 mssql のリンク5. コンテナ...
SASS を使用する開発者が増えるにつれて、SASS コードの数に注意する必要があります。 SASS...
MySQL ストレージ エンジンの概要ストレージ エンジンとは何ですか? MySQL のデータは、さ...
目次序文リスナーと計算プロパティの違いvue3 で watch を使用するにはどうすればいいですか?...
目次Jenkinsのインストールインストールポート番号を変更します(デフォルトのポートは8080です...
コアコード -- 以下では、MySQLでのソート列の実装を示します -- テストデータ CREATE...
<fieldset>と<legend>については、ほとんどの人はおそらく馴染...
データシート /* Navicat SQLite データ転送 ソースサーバー: school ソース...