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

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

//感情を導入する
「@emotion/styled」からstyledをインポートします。

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

//HTML コードで CSS コンポーネントを使用します:
<コンテナ>
//HTML コード</コンテナ>

// 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%;
`;

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

//行コンポーネントを呼び出す <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レム」
    ： 未定義};
}
`;

/* @jsxImportSource @emotion/react */

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