在react项目中编写css,更好的在react项目中写css代码--emotion

简介：

emotion是一个JavaScript库，使用emotion可以用写js的方式写css代码。在react中安装emotion后，可以很方便进行css的封装，复用。使用emotion后，浏览器渲染出来的标签是会加上一个css开头的标识。如下：截图中以css-开头的几个标签，就是使用emotion库后渲染出来的。

bVcQ4qM

下面就从安装到使用，介绍下emotion在工程中的应用。

emotion的安装：yarn add @emotion/react

yarn add @emotion/styled

新增普通css组件：

1，命名和组件一样，大写字母开头

2，styled后面跟html标签// 引入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组件：

// html代码

给已存在组件加样式：

1，变量名首字符大写

2，将已经存在的组件作为参数传入styled

3，样式代码可以加参数// 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%;

提取公共的css组件

1, 反引号之前，接收泛型的参数, 可能用到的参数都要列出来

2, 取传进来的参数，用props来取，比如props.between, 可以用函数返回值给css属性赋值，css属性不渲染，返回值就是undefinedjustify-content: ${(props) => (props.between ? "space-between" : undefined)};

3, 可以用css选择器

4，调用时，跟普通js组件一样使用，传参也相同// 调用Row组件

//html代码

const HeaderLeft = styled(Row)``;

// 定义Row组件

export const Row = styled.div

gap?: number | boolean;

between?: Boolean;

marginBottom?: number;

}>`

display: flex;

align-items: center;