此文章发布于 26 个月前，部分信息可能已经过时，请自行斟酌确认。

u-rate 组件

uView Rate 评分组件文档地址：
https://www.uviewui.com/components/rate.html
该组件一般用于满意度调查，星型评分的场景。

需求说明

该组件禁用后颜色为灰色，如果评分是 5 分时全部五星都是灰色实心显示，这样给用户一种不确定有没有评分的不友好体验。

所以考虑修改下样式，在禁用状态下如果已经评分了此显示红色。

解决方案

1、为组件增加 class="mystar"

<u-rate v-model="bill.appraiseScore" count="5" gutter="20" :touchable="false" :disabled="!btnAppraiseShow" class="mystar"></u-rate>

2、CSS

这里使用深度选择器和 !important，覆盖组件渲染后的内联样式。

/* 评分星星禁用后全是灰色，修改为红色 */
.mystar>>>.uicon-star-fill {
    color: rgb(230, 50, 50) !important
}

3、效果