React使用emotion写css代码

yarn add @emotion/react
yarn add @emotion/styled

// 引入emotion
import styled from "@emotion/styled”;

// 使用emotion 创建css组件
const Container = styled.div`
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vh;
`;

//在html代码中使用css组件：
<Container>
// html代码
</Container>

// Card 是antd已存在的组件
const ShadowCard = styled(Card)`
    width: 40rem;
    min-height: 56rem;
    padding: 3.2rem 4rem;
    border-radius: 0.3rem;
    box-sizing: border-box;
    box-shadow: rgba(0, 0, 0, 0.1) 0 0 10px;
    text-align: center;
`;

// 引入的图片，作为参数直接使用
import logo from "assets/logo.svg";

// 反引号可参照魔法字符串传入参数
const Header = styled.header`
background: url(${logo}) no-repeat center;
padding: 5rem 0;
background-size: 8rem;
width: 100%;
`;

justify-content: ${(props) => (props.between ? "space-between" : undefined)};

// 调用Row组件
<HeaderLeft gap={1}> 
//html代码
</HeaderLeft>
const HeaderLeft = styled(Row)``;


// 定义Row组件
export const Row = styled.div<{
  gap?: number | boolean;
  between?: Boolean;
  marginBottom?: number;
}>`
display: flex;
align-items: center;
justify-content: ${(props) => (props.between ? "space-between" : undefined)};

margin-bottom: ${(props) =>

props.marginBottom ? props.marginBottom + "px" : undefined};

> * {
margin-top: 0 !important;
margin-bottom: 0 !important;
margin-right: ${(props) =>

typeof props.gap === "number"
    ? props.gap + "rem"
    : props.gap
    ? "2rem"
    : undefined};
}
`;

/* @jsxImportSource @emotion/react */

<Form css={{ marginBottom: "2rem" }} layout={"inline”}>
// html代码
</Form>