如何在Quasar校验出错时修改输入框的颜色？

由于Quasar组件自带样式优先级较高，且scoped样式的隔离特性，直接通过普通类选择器无法覆盖错误状态下的背景色，你可以通过以下方法解决：

• 使用深度选择器穿透组件样式隔离，同时结合错误状态的类名精准定位目标元素：

在你的Vue组件的<style>标签中添加如下代码（根据Vue版本选择对应的深度选择器）：

/* Vue 3 及以上使用 ::v-deep */
::v-deep .q-field--standout.q-field--error .q-field__control {
  background-color: #ffeeee; /* 替换成你想要的错误背景色 */
}

/* 如果是Vue 2，使用 /deep/ */
/deep/ .q-field--standout.q-field--error .q-field__control {
  background-color: #ffeeee;
}

• 为什么这样有效：
  1. .q-field--standout对应你设置的standout属性，.q-field--error是校验失败时Quasar自动添加的错误状态类
  2. 深度选择器::v-deep（或/deep/）可以突破Vue scoped样式的隔离，让样式作用到组件内部的元素
  3. 组合多个类选择器提升样式优先级，确保能覆盖Quasar默认的错误背景样式

如果还是不生效，可以尝试在属性值后添加!important（仅特殊场景下临时验证，不推荐滥用）：

::v-deep .q-field--standout.q-field--error .q-field__control {
  background-color: #ffeeee !important;
}

内容的提问来源于stack exchange，提问作者Van Wilder