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

【问题标题】：Vuetify.js: <v-text-field> round cornersVuetify.js：<v-text-field> 圆角
【发布时间】：2018-09-28 14:15:27
【问题描述】：

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

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

【解决方案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;
}

【讨论】：

我刚刚遇到的一个老问题，但是当没有其他选择时，这通常是一个很好的建议，使用 Vuetify API 提供的 rounded 属性比引用更安全（也更干净） CSS 中的内部类名。我自己经常这样做，但仅在 API（请参阅下面的 Johan Ström 回答）或支持类（请参阅下面的 shawnl 回答）不支持所需结果时作为最后的手段。我将这个答案放在 Johan 然后 shawnl 的答案之后的第三位。（发布此答案时，可能不存在这些替代方案。）

【解决方案3】：

你可以这样做：

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

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

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

【讨论】：