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

浩宇酱~ 阅读 14

我在用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>
我来解答 赞 1 收藏
二维码
手机扫码查看
1 条解答
打工人赛赛
问题在于scoped样式穿透不了Quasar组件。有两个解决办法:

方法一:去掉scoped,用全局样式



方法二:用deep穿透scoped



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

另外注意选择器,错误状态下的class是.q-field--error,用这个更精准,不会影响到非错误状态的消息显示。
点赞
2026-03-13 23:01