Emotion项目中的对象样式(Object Styles)深度解析-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00447/article/details/148375130

Emotion项目中的对象样式(Object Styles)深度解析

emotion 👩‍🎤 CSS-in-JS library designed for high performance style composition 项目地址: https://gitcode.com/gh_mirrors/em/emotion

什么是对象样式

Emotion作为现代CSS-in-JS解决方案，提供了对象样式(Object Styles)这一强大功能。与传统的CSS字符串写法不同，对象样式允许开发者使用JavaScript对象来描述样式规则，这种模式直接内置于Emotion核心中。

对象样式的主要特点：

使用驼峰式(camelCase)命名而非短横线(kebab-case)命名
完全类型安全(配合TypeScript使用时)
支持嵌套、媒体查询等高级特性
可与其他Emotion样式组合使用

基础用法

在css prop中使用

<div
  css={{
    color: 'darkorchid',
    backgroundColor: 'lightgray'
  }}
>
  这段文字将显示为暗紫色
</div>

这种写法无需额外的css函数调用，直接在JSX中内联样式对象即可。

在styled组件中使用

import styled from '@emotion/styled'

const Button = styled.button(
  {
    color: 'darkorchid'
  },
  props => ({
    fontSize: props.fontSize
  })
)

<Button fontSize={16}>这是一个暗紫色按钮</Button>

对象样式可以与函数结合使用，实现基于props的动态样式。

高级特性

子选择器

<div
  css={{
    color: 'darkorchid',
    '& .name': {
      color: 'orange'
    }
  }}
>
  父元素文字为暗紫色
  <div className="name">子元素文字为橙色</div>
</div>

使用&符号可以创建嵌套选择器，类似于Sass的嵌套语法。

媒体查询

<div
  css={{
    color: 'darkorchid',
    '@media(min-width: 420px)': {
      color: 'orange'
    }
  }}
>
  大屏幕显示橙色，小屏幕显示暗紫色
</div>

媒体查询可以直接在样式对象中定义，响应式设计变得非常简单。

数值处理

<div
  css={{
    padding: 8,        // 自动转换为8px
    zIndex: 200,      // 无单位属性保持原样
    lineHeight: 1.5   // 无单位属性
  }}
>
  自动添加px单位示例
</div>

Emotion会自动为大多数数值属性添加px单位，但对于zIndex、lineHeight等无单位属性会保持原样。

样式组合技巧

数组展开

<div
  css={[
    { color: 'darkorchid' },
    { backgroundColor: 'hotpink' },
    { padding: 8 }
  ]}
>
  数组会被自动展开合并
</div>

使用数组可以更好地组织样式规则，数组会被自动展开(flatten)。

浏览器回退

<div
  css={{
    background: ['red', 'linear-gradient(#e66465, #9198e5)'],
    height: 100
  }}
>
  支持渐变的浏览器显示渐变，不支持的显示红色
</div>

通过数组可以提供多个备选值，Emotion会按顺序尝试应用这些样式。

使用css函数

import { css } from '@emotion/react'

const hotpink = css({
  color: 'hotpink'
})

<div>
  <p css={hotpink}>使用css函数定义的样式</p>
</div>

css函数可以与对象样式配合使用，创建可复用的样式块。

样式组合(Composition)

Emotion最强大的特性之一就是样式组合：

const base = css({
  color: 'hotpink'
})

const hoverStyles = css({
  '&:hover,&:focus': base
})

const combined = css(
  {
    backgroundColor: 'black'
  },
  base
)

<div>
  <button css={hoverStyles}>悬停或聚焦时变粉色</button>
  <p css={combined}>黑色背景上的粉色文字</p>
</div>

样式组合的注意事项：