如何从单个文件组件中的范围样式覆盖 Vuetify 文本字段下划线？答案

【问题标题】：How to override Vuetify text-field underline from scoped style in single file component?如何从单个文件组件中的范围样式覆盖 Vuetify 文本字段下划线？
【发布时间】：2021-03-13 15:39:03
【问题描述】：

我正在尝试从单个文件组件的范围样式更改未聚焦的regular v-text-field 的下划线边框的默认颜色，但我无法覆盖它。我已经使用标签类上的深度选择器覆盖了文本字段标签的字体大小，如下所示：

.v-text-field >>> .v-label {
  font-size: 14px;
}

...这行得通。 Chrome 开发工具显示负责下划线的类是：

.theme--light.v-text-field > .v-input__control > .v-input__slot::before {
    border-color: rgba(0, 0, 0, 0.42);
}

我尝试了以下变体，但都没有奏效：

/* .theme--light.v-text-field >>> .v-input__control >>> .v-input__slot::before { */
/* .theme--light.v-text-field > .v-input__control >>> .v-input__slot::before { */
/* .v-text-field >>> .v-input__control >>> .v-input__slot::before { */
/* .v-text-field > .v-input__control >>> .v-input__slot::before { */
/* .v-input__control >>> .v-input__slot::before { */
.v-input__slot::before {
  border-color: rgb(255, 0, 0) !important;
}

顺便说一句，我这样做只是因为v-text-field 上似乎没有任何允许更改边框颜色的道具（我对此感到惊讶），除非我误解了？

【问题讨论】：

标签： vuetify.js

【解决方案1】：

不幸的是v-text-field 没有暴露任何道具来改变边框颜色。但是，您仍然可以使用深度选择器来覆盖边框颜色。在第一个示例中，您使用了>>> 来覆盖字体大小。同样适用于边框颜色。

示例

.v-text-field >>> .v-input__slot::before  { border-color: rgb(255, 0, 0) !important; }

或

::v-deep .v-input__slot::before  { border-color: rgb(255, 0, 0) !important; }

甚至可以使用

>>> .v-input__slot::before  { border-color: rgb(255, 0, 0) !important; }

更多关于deep selectors的信息

【讨论】：