Quasar里怎么自定义QInput的错误提示样式?
我在用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>
方法一:去掉scoped,用全局样式
方法二:用deep穿透scoped
推荐方法一,直接去掉scoped更省事。Quasar的样式本身就是全局的,你加scoped反而麻烦。
另外注意选择器,错误状态下的class是
.q-field--error,用这个更精准,不会影响到非错误状态的消息显示。