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

相关推荐
艾小逗2 小时前
vue3中的effectScope有什么作用,如何使用?如何自动清理
前端·javascript·vue.js
小小小小宇5 小时前
手写 zustand
前端
Hamm5 小时前
用装饰器和ElementPlus,我们在NPM发布了这个好用的表格组件包
前端·vue.js·typescript
小小小小宇6 小时前
前端国际化看这一篇就够了
前端
大G哥6 小时前
PHP标签+注释+html混写+变量
android·开发语言·前端·html·php
whoarethenext6 小时前
html初识
前端·html
小小小小宇6 小时前
一个功能相对完善的前端 Emoji
前端
m0_627827526 小时前
vue中 vue.config.js反向代理
前端
Java&Develop6 小时前
onloyoffice历史版本功能实现,版本恢复功能,编辑器功能实现 springboot+vue2
前端·spring boot·编辑器
白泽talk7 小时前
2个小时1w字| React & Golang 全栈微服务实战
前端·后端·微服务