vanilla-extract/css-使用用途及范式总结

此笔记主要记录vanilla-extract/css api使用用途、组合方式以及范式，后续随机补充.基础用法参考官方文档

样式组合

使用基础样式组合自定义样式实现自定义混入,并最终生成一个类名

import { style } from "@vanilla-extract/css"

// 普通组合
const base = style({
  display: 'flex',
  width: '100%',
  height: '100%',
})
export const primary = style([base, { background: 'blue' }])

组合预定义的 sprinkles

import { sprinkles } from "../styles/sprinkles.css"

export const sencondary = style([
  sprinkles({
    dp: 'flex',
    w: '100%',
    h: '100%'
  }),
  {
    background: 'aqua'
  }
])

样式变体

多用于主体颜色及组件自定义

使用 styleVariants

import { styleVariants } from "@vanilla-extract/css"

// 使用styleVariants
const platte = {
  primary: 'blue',
  secondary: 'aqua'
}
export const colorVariants = styleVariants(
  platte,
  platteColor => ({ background: platteColor })
)

使用 recipe 进行样式变体自定义

import { sprinkles } from "@vanilla-extract/css"
import { recipe } from "@vanilla-extract/recipes"

export const Card = recipe({
  base: sprinkles({
    dp: 'flex',
    jc: 'center',
    ai: 'center'
  }),
  variants: {
    primary: {
      // ...
    },
    size: {
      // ...
    },
    round: {
      true: {
        // ...
      }
    }
  }
})