Vuetify.js：<v-text-field>圆角

Question

如何在 Vuetify 中获得

<v-text-field>

的圆角？

<v-flex xs12>
    <v-text-field  style="border-radius:50px"
        label="Text field"
        solo
    ></v-text-field>
</v-flex>

我尝试使用

border-radius

属性来打扰容器

<v-flex>

和

<v-text-field>

本身，但它不起作用。

Answer 1

您可以将 rounded 属性添加到 v-text-field (vuetify docs)

<v-text-field
  label="Text field"
  solo
  rounded
></v-text-field>

Answer 2

每当我需要更改 Vuetify 样式时，我都会向包含元素添加一个类，然后添加您的样式。由于特殊性，使用 Vuetify（像任何框架一样）可能会令人沮丧。在这种情况下，您至少需要 3 级特异性。

模板

<v-text-field
  label="Text field"
  solo
  class="my-input"
></v-text-field>

CSS

.my-input.v-input .v-input__slot {
  border-radius: 100px;
}

Answer 3

对于 vuetify 3 这对我不起作用，所以我使用了从 dom 获取的 CSS 选择器

.v-text-field ::v-deep(.v-field) { border-radius: 8px; }

希望这对 vuetify 3 有帮助

Answer 4

对于 vuetify 3，您可以添加

rounded

并传递尺寸（即 sm、md、lg 等）

<v-text-field
  rounded="lg"
  solo
></v-text-field>

Answer 5

你可以这样做：

<v-text-field
  label="Text field"
  solo
  class="rounded-lg"
></v-text-field>

您可以添加这些类来控制边框半径：

我经常使用“rounded-0”来删除像

v-text-field

这样的组件中讨厌的边框半径。