React Emotion 如何优雅的使用样式(一)

简介

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

相关推荐
我是小路路呀1 小时前
vue开始时间小于结束时间,时间格式:年月日时分
前端·javascript·vue.js
虾球xz1 小时前
游戏引擎学习第201天
前端·学习·游戏引擎
我自纵横20231 小时前
JavaScript 中常见的鼠标事件及应用
前端·javascript·css·html·计算机外设·ecmascript
li_Michael_li1 小时前
Vue 3 模板引用(Template Refs)详解与实战示例
前端·javascript·vue.js
excel1 小时前
webpack 核心编译器 十五 节
前端
excel1 小时前
webpack 核心编译器 十六 节
前端
雪落满地香3 小时前
css:圆角边框渐变色
前端·css
风无雨5 小时前
react antd 项目报错Warning: Each child in a list should have a unique “key“prop
前端·react.js·前端框架
人无远虑必有近忧!5 小时前
video标签播放mp4格式视频只有声音没有图像的问题
前端·video
安分小尧10 小时前
React 文件上传新玩法:Aliyun OSS 加持的智能上传组件
前端·react.js·前端框架