如何在Class Variance Authority中嵌套属性并单独访问？

可以实现，但CVA默认不直接支持返回拆分的属性对象，需要调整写法，通过自定义结构和合并逻辑达成需求。

实现方案 #

将基础样式和变体样式定义为包含拆分属性的对象，同时配置CVA的merge函数组合这些对象并返回最终结构，就能单独访问box这类属性的类名：

import { cva } from 'class-variance-authority';

const mathPanelVariants = cva(
  // 基础样式按属性拆分
  {
    base: 'relative mt-[100px] w-full rounded-sm border-l-[3px] px-[24px] py-[16px]',
    box: ''
  },
  {
    variants: {
      variant: {
        theorem: {
          box: 'border-l-[#617bff] dark:bg-[#182635] bg-[#e0ecff]'
        }
      }
    },
    defaultVariants: {
      variant: 'theorem'
    },
    // 自定义合并函数，将各属性的类名数组转为字符串
    merge: (values) => {
      return Object.fromEntries(
        Object.entries(values).map(([key, classes]) => [key, classes.join(' ')])
      );
    }
  }
);

使用方式 #

调用函数后可单独访问指定属性的类名：

const styles = mathPanelVariants({ variant: 'theorem' });
console.log(styles.box); // 输出：border-l-[#617bff] dark:bg-[#182635] bg-[#e0ecff]
console.log(styles.base); // 输出基础样式类名

原理说明 #

• 把基础样式拆分为多属性对象，替代单一字符串
• 变体中对应属性的类名会追加或覆盖基础属性
• 自定义merge函数将CVA内部收集的类名数组转换为字符串，最终返回结构化的样式对象

内容的提问来源于stack exchange，提问作者Ugus