Emotion Variants

为 Emotion 打造的类型安全 variant API

无需反复调用 css()，即可清晰地定义拥有多个 variant 的组件样式。

npm install emotion-variants @emotion/react @emotion/css

variant

size

color

完整的类型推导

TypeScript 会自动推导 variant 的键、值以及组合。无需类型断言，也无需 any。

定义仅在多个 variant 同时匹配时才生效的样式，例如 large 与 primary 的组合。

设置合理的默认值后，即使省略 props 也能得到带样式的组件。

base 样式在定义时只序列化一次。调用时只需选出匹配的样式并传给 css prop。

与 @emotion/react 的 css prop 直接配合使用。无需打包工具配置，也无需 Provider。

可以直接在代码中读取生成的类名，适合测试或在 React 以外的环境中使用。

向下滚动，看看原生 Emotion 按钮如何变成一份 ev() 配置。

Before
样式分散在三处
使用原生 Emotion 时，查找表、手写的 props 类型以及组件内的条件展开都在描述同一个按钮。新增一个 size，就得把它们全部改一遍。
After
一份配置容纳一切
公共样式变成 base，查找表变成 variants，条件展开变成 compoundVariants，参数默认值变成 defaultVariants。新增 size 只需在一处添加一项。
After
类型自动推导，组件只需一行
VariantProps 会根据配置生成 props 类型。新增 variant 时无需手动修改类型。组件只需把收到的 props 传给样式函数。

Button.tsxBefore

选择一个概念，看看配置如何变化。

在一处集中定义样式选项。阅读文档 →

安装依赖包，然后把一个组件的样式迁移到 ev() 中。