正文

React使用emotion写css代码

︶ㄣ米米素材网 メ
米米素材网V管理员 / 阅读
0711

这篇文章主要介绍了React如何使用emotion写css代码，帮助大家更好的理解和学习使用React，感兴趣的朋友可以了解下

简介：

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

React使用emotion写css代码

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

emotion的安装：

?
1
2
yarn add @emotion/react
yarn add @emotion/styled

新增普通css组件：

1，命名和组件一样，大写字母开头
2，styled后面跟html标签

?
1
2
// 引入emotion
import styled from "@emotion/styled”;
?
1
2
3
4
5
6
7
// 使用emotion 创建css组件
const Container = styled.div`
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vh;
`;
?
1
2
3
4
//在html代码中使用css组件：
<Container>
// html代码
</Container>

给已存在组件加样式：

1，变量名首字符大写
2，将已经存在的组件作为参数传入styled
3，样式代码可以加参数

?
1
2
3
4
5
6
7
8
9
10
// 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;
`;
?
1
2
3
4
5
6
7
8
9
10
// 引入的图片，作为参数直接使用
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属性不渲染，返回值就是undefined

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

3, 可以用css选择器
4，调用时，跟普通js组件一样使用，传参也相同

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// 调用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};
}
`;

写emotion行内样式

1，在组件的顶部写上 下面代码，告知当前组件用了emotion行内样式

?
1
/* @jsxImportSource @emotion/react */

2，行内样式的格式：css={ /* 行内样式代码 */ }

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

以上就是emotion的介绍和使用。(#^.^#)

以上就是React使用emotion写css代码的详细内容，更多关于React用emotion写css代码的资料请关注米米素材网其它相关文章！

原文链接：https://segmentfault.com/a/1190000039778793