给定 Nuxt UI Chip 组件具有一个 color 属性，用于接受固定颜色。

我正在计算一个热力图颜色，范围是Tailwind颜色 "bg-transparent" 到 "bg-emerald-900"，但如何应用它们呢？

color 属性不接受它们，而 class="bg-emerald-900" 会设置内容背景颜色。

有没有办法用该自定义颜色来设置 ui 属性？

参考这个 sandbox

这是不可能的

    <UChip color="bg-emerald-900">
      <UButton label="btn" />
    </UChip>

也不是这个

    <UChip class="bg-emerald-900">
      <UButton label="btn" />
    </UChip>

解决方案

你需要使用 ui 属性。TailwindCSS可以在任意位置检测到它自己的类名，因此 bg-emerald-900 将被包含在编译后的CSS中；此外，NuxtUI将能够通过 ui.base 应用它。

<UChip :ui="{ base: 'bg-emerald-900' }">
  <UButton label="btn" />
</UChip>

单独使用 bg-emerald-900 是否已经足够，还是你还需要应用 !important 修饰符，取决于CSS的层级和特异性顺序。

<UChip :ui="{ base: 'bg-emerald-900!' }">
  <UButton label="btn" />
</UChip>