主页 / coding / 问题 / 79429961
Accepted
user824624
Asked: 2025-02-11 20:27:50 +0800 CST

如何覆盖元素的 CSS 变量的值？

  • 772

目前正在使用 primevue，但按钮看起来太大了，y 填充如图所示

左按钮是 primevue 按钮，右按钮是我想要的。

左按钮是 primevue 按钮，右按钮是我想要的。

查看按钮 css，我发现它与填充有关：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);
}

那么我该如何在我的 vue3 项目中编辑变量 - （--p-button-padding-y）？

vuejs3

1 个回答

  1. Best Answer

    可以使用 CSS 覆盖任何 CSS 变量的值：

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

    其中newValue是一个在您的情况下有意义的实际值，并且.some-selector是一个负责将更改仅应用于您想要的元素的选择器。

    注意：覆盖元素上的 CSS 变量的值也会应用（向下级联）到其所有子元素（这就是 CSS 的工作方式，也是它被称为 CSS - 层叠样式表的原因）。

    因此，要为所有按钮编辑它，

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

    ...就可以了（0.25em只是一个例子。使用任何你需要的）。

    如果您只想将其应用于特定按钮，您可以以内联方式应用它：

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

    或者使用专用类：

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

    笔记：

    1. 您可能需要具有稍微高一些特异性的选择器，这取决于您当前的自定义 CSS 和/或您如何加载 PrimeVue。如果我的建议不起作用，那很可能就是原因，但是如果没有最小的可重现示例，我无法知道您目前拥有什么。
    2. 从您展示的内容来看，我不确定是按钮的填充导致它变高，而​​是插入符号 ( padding、font-size或line-height) 导致的。同样，从屏幕截图中无法分辨。创建一个最小的再现。
    • 2

相关问题