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

码蚁先生2024-02-06 17:13

简介

Emotion 是一个专为使用 JavaScript 编写 css 样式而设计的库。它提供了强大且可预测的样式组合，以及源映射、标签和测试实用程序等功能为开发人员提供了出色的体验，并且支持字符串和对象样式。

与框架无关的样式应用包

Emotion中提供了一个与框架无关的样式应用包@emotion/css，这是使用 Emotion的最简单的方法，应用这个包，无需关心CSS的相关适配问题。我们只需要用 css 函数生成类名并编写样式就行了。

安装

bash 复制代码

npm i @emotion/css

示例

javascript 复制代码

import { css } from '@emotion/css'

const color = 'white'

render(
  <div
    className={css`
      padding: 32px;
      background-color: hotpink;
      font-size: 24px;
      border-radius: 4px;
      &:hover {
        color: ${color};
      }
    `}
  >
   Hover 示例
  </div>
)

试试看上面的示例，当鼠标悬停在Div 上时的颜色变化

适用React下的应用包

bash 复制代码

npm i @emotion/react

示例

javascript 复制代码

import { css } from '@emotion/react'

const color = 'white'

render(
  <div
    css={css`
      padding: 32px;
      background-color: hotpink;
      font-size: 24px;
      border-radius: 4px;
      &:hover {
        color: ${color};
      }
    `}
  >
    Hover to change color.
  </div>
)

还可以使用 styled 样式包, 比如在MUI就是使用的这个包。

bash 复制代码

npm i @emotion/styled @emotion/react --save

示例

javascript 复制代码

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