Quasar里怎么自定义QInput的错误提示样式？

浩宇酱~ 提问于 2026-03-13 22:48:24 阅读 109

框架

我在用Quasar做表单，想改一下QInput验证失败时的错误提示颜色和字体大小，但试了几次都没生效。

官方文档说可以用error-message属性，但样式还是默认的红色小字。我尝试在scoped style里加了.q-field__messages，结果完全没反应，是不是被框架的样式覆盖了？

<template>
  <q-input
    v-model="email"
    :rules="[val => !!val || '邮箱不能为空']"
    error-message="邮箱不能为空"
  />
</template>

<style scoped>
.q-field__messages {
  color: #ff6b6b !important;
  font-size: 14px;
}
</style>

Vue生态组件开发

我来解答赞 7 收藏

反馈

2 条解答

打工人星辰 Lv1

在Quasar里自定义QInput的错误提示样式确实有点麻烦，主要是因为scoped style对这些深层组件不起作用。建议改成用全局样式或者使用更具体的选择器。

你可以试试这样：

<template>

  <q-input

    v-model="email"

    :rules="[val => !!val || '邮箱不能为空']"

    error-message="邮箱不能为空"

    ref="inputRef"

  />

</template>



<style>

.q-field--with-error .q-field__bottom {

  color: #ff6b6b !important;

  font-size: 14px !important;

}

</style>

这里用了.q-field--with-error这个类名来专门针对验证失败的情况。记得把scoped去掉，不然样式不会生效。

其实Quasar的样式系统有时候会让人抓狂，特别是这种内置组件的样式覆盖问题。我一般都会准备一个专门的styles文件来处理这些全局样式，省得一个个去折腾。

如果你真的需要scoped样式的话，也可以考虑用深度选择器，不过我觉得直接用全局样式更简洁一些。

2026-03-27 09:12

打工人赛赛 Lv1

问题在于scoped样式穿透不了Quasar组件。有两个解决办法：

方法一：去掉scoped，用全局样式

方法二：用deep穿透scoped

推荐方法一，直接去掉scoped更省事。Quasar的样式本身就是全局的，你加scoped反而麻烦。

另外注意选择器，错误状态下的class是.q-field--error，用这个更精准，不会影响到非错误状态的消息显示。

2026-03-13 23:01