如何覆盖特定组件中的 vuetify 样式？

Question

我正在尝试从v-text-field 组件中删除填充。但我希望此更改仅应用于单个 vue 文件，而不是全局应用。更新 variables.scss 文件有效，但它从整个网站中的所有 v-text-field 组件中删除了我不想要的填充。

这是我正在尝试的，但它不起作用

test.vue

<template>
  <v-text-field
          placeholder="What are you looking for"
          outliend
          filled
  ></v-text-field>
</template>

<style lang="scss" scoped>
$text-field-enclosed-details-padding: 0;
</style>

Answer 1

只需创建一个类：

<template>
  <v-text-field
    class="custom-field"
    placeholder="What are you looking for"
    outliend
    filled
  ></v-text-field>
</template

<style lang="scss" scoped>
.custom-field {
  padding: 0px!important;
}
</style>

如果您想要更多自定义，请在 main.js 中的 Vuetify 对象中使用您自己的主题：documentation here。