用于修改 Vuetify 3 v-text-field 轮廓的 scss 变量是什么？

Question

我的表单中有几个 v-text-field。我想修改通过Vuetify的outline属性添加的轮廓的颜色。我正在尝试在 main.scss 文件中添加相关的 scss 变量，如下所示：

@use 'vuetify/settings' with (

  $input-outline-color: #E9DEFC,

  $input-outline-active-color: #CFBCFF,

  $input-outline-inactive-color: #E7DFF6

);



@use 'vuetify' as *;

@use 'vuetify/styles';

我查看了 Vuetify 的 API 文档中的 v-text-field、field 和 input。但是，我找不到合适的变量名称。我希望能够将相关变量名称添加到我的 main.scss 文件中，并修改轮廓在其本机、主动和被动状态下的默认颜色。

Answer 1

也没有找到任何预定义的 scss 变量...

在 v-text-field 上添加自定义类

.custom-outline

，并应用下面的 CSS 应该可以：

<v-text-field
    ...
    outlined
    class="custom-outline"
  ></v-text-field>

款式：

.custom-outline .v-input__control .v-input__slot::before {
  border-color: red !important; /* Default outline color */
}

.custom-outline .v-input__control .v-input__slot::after {
  border-color: blue !important; /* Outline color when focused */
}