Vuetify 使所有按钮变圆

Question

我有一个按钮太多的 vuetify 应用程序，我想用圆角样式更改它们，但不必一一添加此属性。
有没有办法使用主题或预设来添加这个功能？

像下面这样添加样式：

  .v-btn{
        border-radius:28px!important;
    }

但是通过这种方式，我可以永远使用普通按钮。

创建像my-rounded-button 这样的自定义组件也可以。但是假设您想为其他组件全局设置属性，这样您必须为 vuetify 中的每个元素创建一个自定义组件。更何况如果你想在项目中间更改所有按钮，你仍然需要将所有按钮名称从v-btn更改为my-rounded-button。

我正在寻找的是将所有v-btncomponents 的rounded 属性设置为true，然后每当我想使用not rounded 时，我仍然可以将其设置为:rounded="false"。

Answer 1

在尝试找到使用presets 定义默认道具的方法后，但这不适用于按钮等所有组件，因此我建议定义全局 CSS 规则：

 .v-btn{
    border-radius:28px!important;
 } 

当您想使用普通按钮时，添加另一个 CSS 规则，例如：

 .v-btn-not-rounded{
    border-radius:4px!important;
 } 

并使用类绑定如下：

  <v-btn depressed :class={'v-btn-not-rounded':true} color="primary">not rounded</v-btn>

检查这个pen