React uses emotion to write CSS code

Introduction:

emotion is a JavaScript library. Using emotion, you can write CSS code in the same way as writing JS. After installing emotion in react, you can easily encapsulate and reuse CSS. After using emotion, the tags rendered by the browser will be added with a logo starting with css. As follows: The tags starting with css- in the screenshot are rendered using the emotion library.

The following will introduce the application of emotion in engineering from installation to use.

Installation of emotion:

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

Add common CSS components:

1. Name the same as the component, starting with a capital letter
2. Styled is followed by the html tag

//Introduce emotion
import styled from "@emotion/styled";

// Create a CSS component using emotion const Container = styled.div`
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vh;
`;

//Use css components in html code:
<Container>
//html code</Container>

To add styles to an existing component:

1. Capitalize the first character of the variable name
2. Pass the existing component as a parameter to styled
3. Style code can add parameters

// Card is an existing component of 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;
`;

// Imported image, used directly as a parameter import logo from "assets/logo.svg";

// Backticks can refer to the magic string passed in parameter const Header = styled.header`
background: url(${logo}) no-repeat center;
padding: 5rem 0;
background-size: 8rem;
width: 100%;
`;

Extract common CSS components

1. Before the backquote, all possible parameters that may be used should be listed to receive generic parameters.
2. Get the parameters passed in, use props to get them, such as props.between, you can use the function return value to assign the CSS attribute, the CSS attribute is not rendered, and the return value is undefined

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

3. You can use css selector
4. When calling, use it like a normal js component, and pass the same parameters

//Call Row component <HeaderLeft gap={1}> 
//html code</HeaderLeft>
const HeaderLeft = styled(Row)``;


// Define the Row component 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};
}
`;

Write emotion inline styles

1. Write the following code at the top of the component to inform the current component to use the emotion inline style

/* @jsxImportSource @emotion/react */

2. Inline style format: css={ /* Inline style code*/ }

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

The above is the introduction and use of emotion. (#^.^#)

The above is the details of how React uses emotion to write CSS code. For more information about how React uses emotion to write CSS code, please pay attention to other related articles on 123WORDPRESS.COM!