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

Question

如何<v-text-field>在Vuetify中获得圆角？

<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-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;
}