简介：
emotion是一个JavaScript库，使用emotion可以用写js的方式写css代码。在react中安装emotion后，可以很方便进行css的封装，复用。使用emotion后，浏览器渲染出来的标签是会加上一个css开头的标识。如下：截图中以css-开头的几个标签，就是使用emotion库后渲染出来的。
下面就从安装到使用，介绍下emotion在工程中的应用。
emotion的安装：
复制代码
1
2yarn 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
复制代码
1justify-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代码的资料请关注靠谱客其它相关文章！
最后
以上就是碧蓝帅哥最近收集整理的关于React使用emotion写css代码的全部内容，更多相关React使用emotion写css代码内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复