How to override the value of a CSS variable for an element?

Question

currently using primevue, but the button looks too big y-padding for as shown

left button is primevue button, right button is what I want.

look into the button css, I found this it has to do with padding: var(--p-button-padding-y);

.p-button {
    display: inline-flex;
    cursor: pointer;
    user-select: none;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    color: var(--p-button-primary-color);
    background: var(--p-button-primary-background);
    border: 1px solid var(--p-button-primary-border-color);
    padding: var(--p-button-padding-y) var(--p-button-padding-x);
}

so how would I edit the variable - (--p-button-padding-y) in my vue3 project?

Answer 1

The value of any CSS variable can be overridden using CSS:

.some-selector {
  --my-var: newValue
}

where newValue is an actual value which makes sense in your case and .some-selector is a selector in charge of applying the change only to the elements you want.

Note: overriding the value of a CSS variable on an element also applies (cascades down) to all its children (that's how CSS works and why it's called CSS - Cascading Style Sheets).

So, to edit it for all buttons,

.p-button {
  --p-button-padding-y: 0.25em;
}

...will do (0.25em is an example. Use whatever you need).

If you only want it applied on a particular button, you could either apply it inline:

<Button 
  :style="{
    '--p-button-padding-y': '0.25em'
  }"
/>

or using a dedicated class:

<template>
  <Button class="my-button" />
</template>
<style>
.p-button.my-button {
  --p-button-padding-y: 0.25em;
}
</style>

---

Notes:

1. you might need selectors with a slightly higher specificity, depending on your current custom CSS and/or how you load PrimeVue. If what I suggested doesn't work, that is, most likely, the reason, but I have no way of knowing what you currently have, without a minimal reproducible example.
2. From what you're showing, I'm not sure it's the button's padding that's causing it to be taller, but the caret's (padding, font-size or line-height). Again, it's impossible to tell from a screenshot. Create a minimal repro.