vue.js - How to customize a PrimeVue component design tokens? - Stack Overflow

I'm learning PrimeVue 4 and I can't figure out how to customize its components' design tokens.

For example, this page (under the "themes" tab) has a list of design tokens

But I have no idea how to customize, for example, the iftalabel.font.size token

I tried to specify in my main.scss module value for --p-iftalabel-font-size variable but with no success:

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

Could someone please tell me how to do this properly?

I'm learning PrimeVue 4 and I can't figure out how to customize its components' design tokens.

For example, this page https://primevue.org/iftalabel (under the "themes" tab) has a list of design tokens

But I have no idea how to customize, for example, the iftalabel.font.size token

I tried to specify in my main.scss module value for --p-iftalabel-font-size variable but with no success:

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

Could someone please tell me how to do this properly?

• vue.js
• primevue

Share Improve this question Follow edited Jan 16 at 13:50 DZN asked Jan 16 at 13:16 DZNDZN 1,61433 gold badges2525 silver badges4949 bronze badges 1

• Isn't it supposed to be done in the config file rather? primevue.org/theming/styled – kissu Commented Jan 16 at 14:44

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

You can do this in 2 ways (as far as i know): 1 -> add !important to your css line, like this

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

2 -> you can do it the "better" way by modifying the main.js, with definePreset, something like this

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

You can check this guy tutorial, he shows all the process. YouTube Guy PrimeVue Theming