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>本身，但是它不起作用。

Codepen。

Answer 1

您可以将 rounded 属性添加到v文本字段（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

你可以这样做：

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

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

• 圆形-sm
• 圆形
• 圆形-lg
• 圆形xl
• 四舍五入-0

我经常使用“rounded-0”来移除 v-text-field 等组件中讨厌的边框半径。

Full documentation here。