React Emotion 如何优雅的使用样式（一）

简介

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 包。