anydrag建站专家网站建设系统自助建站申请
简介
Emotion 是一个专为使用 JavaScript 编写 css 样式而设计的库。它提供了强大且可预测的样式组合，以及源映射、标签和测试实用程序等功能为开发人员提供了出色的体验，并且支持字符串和对象样式。
与框架无关的样式应用包
Emotion中提供了一个与框架无关的样式应用包@emotion/css， 这是使用 Emotion的最简单的方法，应用这个包，无需关心CSS的相关适配问题。我们只需要用 css 函数生成类名并编写样式就行了。
安装
npm i @emotion/css
示例
import { css } from '@emotion/css'const color = 'white'render(<divclassName={css`padding: 32px;background-color: hotpink;font-size: 24px;border-radius: 4px;&:hover {color: ${color};}`}>Hover 示例</div>
)
试试看上面的示例，当鼠标悬停在Div 上时的颜色变化
适用React下的应用包
npm i @emotion/react
示例
import { css } from '@emotion/react'const color = 'white'render(<divcss={css`padding: 32px;background-color: hotpink;font-size: 24px;border-radius: 4px;&:hover {color: ${color};}`}>Hover to change color.</div>
)
还可以使用 styled 样式包, 比如在MUI就是使用的这个包。
npm i @emotion/styled @emotion/react --save
示例
import styled from '@emotion/styled'const Button = styled.button`padding: 32px;background-color: hotpink;font-size: 24px;border-radius: 4px;color: black;font-weight: bold;&:hover {color: white;}
`render(<Button>This my button component.</Button>)
总结
上面讲了多种使用 Emotion的方法，如果你使用的是 React，最简单的入门方法是使用 @emotion/react 包。如果你不使用 React，你应该使用 @emotion/css 包。