我正在开发一个 Nuxt 项目,并尝试向 NuxtUI 组件添加自定义颜色。我已经设法让它部分工作,但这个过程感觉有点笨拙。如果可能的话,我正在寻找一种更直接的方法,将自定义颜色直接包含在 NuxtUI 调色板中。
theme: {
extend: {
colors: {
variantred: {
50: '#fff0f0',
100: '#ffdddd',
200: '#ffc0c0',
300: '#ff9494',
400: '#ff5757',
500: '#ff2323',
600: '#ff1a1a',
700: '#d70000',
800: '#b10303',
900: '#920a0a',
950: '#500000',
},
export default defineNuxtConfig({
ui: {
colors: {
alternativered: 'variantred',
}
}
<template>
<UButton color="variantred">Red Button</UButton>
</template>
当我尝试使用
"alternativered"
作为 UButton
的颜色时,基色未按预期应用。但是,将其添加到 nuxt.config.ts
中可以使阴影正常工作,例如悬停时按钮会改变颜色。
有人有此问题的经验或知道更好的方法将自定义颜色与 NuxtUI 组件中的完整功能集成吗?
我在 NuxtUI 主题文档中发现,他们建议使用
safelistColors
来包含自定义颜色。然而,如果不应用safelistColors
,我上面所做的配置似乎只能工作。
环境详情:
Nuxt:3.13.2
NuxtUI:2.18.7
顺风:2014年4月3日
感谢您的任何见解!
似乎推荐的最佳实践是,在
tailwind.config.ts
中添加颜色及其阴影后,将颜色值添加到 nuxt.config.ts
中的 ui.safelistColors 中。然后,您可以将颜色名称直接应用于组件。 nuxt.config.ts:
export default defineNuxtConfig({
ui: {
safelistColors: ['variantred']
}
在组件文件中:
<template>
<UButton color="variantred">Button</UButton>
</template>