如何更改 Vuetify v-text-field 轮廓边框答案

【问题标题】：How to change Vuetify v-text-field outlined border如何更改 Vuetify v-text-field 轮廓边框
【发布时间】：2023-03-21 08:19:01
【问题描述】：

我一直在尝试覆盖 outlined v-text-field 的默认边框颜色。基本上我想要一个特定的颜色（不集中，集中，悬停）使用下面的代码笔：

<v-text-field
              label="Outlined"
              outlined
              dense
            ></v-text-field>

有人可以在这里提供一些急需的帮助吗？

谢谢。

【问题讨论】：

【解决方案1】：

您可以尝试使用以下 CSS：

.v-text-field--outlined fieldset {
    color: red !important;
}

【讨论】：

【解决方案2】：

如果您使用的是 SASS 变量，请像这样自定义灯光主题：

// Your custom main.scss

$material-light: (
  'text-fields': (
    'outlined': rgba(0,0,0, 0.19),
    'outlined-hover': rgba(0,0,0, 0.38),
  ),
);

焦点颜色只是原色。你可以像这样覆盖@vuetify/src/styles/settings/_light.scss中的所有变量。

【讨论】：