如何自定义PrimeVue组件设计令牌？

Question

我正在学习 PrimeVue 4，但我不知道如何自定义其组件的设计标记。

例如，此页面https://primevue.org/iftalabel（在“主题”选项卡下）有一个设计令牌列表

但我不知道如何自定义，例如

iftalabel.font.size

令牌

我尝试在我的

main.scss

模块中指定

--p-iftalabel-font-size

变量的值，但没有成功：

:root {
    --p-iftalabel-font-size: 0.8rem;
}

有人可以告诉我如何正确执行此操作吗？

Answer 1

你可以通过两种方式做到这一点（据我所知）： 1 -> 添加 !important 到你的 css 行中，像这样

:root {
--p-iftalabel-font-size: 5px !important;
}

2 -> 你可以通过修改 main.js 和 definePreset 来实现“更好”的方式，就像这样

const MyPreset = definePreset(Aura, {
    components: {
        iftalabel: {
            root:{
               fontSize: '0.8rem'
            }
        }
    }
});

你可以查看这个人的教程，他展示了所有的过程。 YouTube 人 PrimeVue 主题