如何修改MudRating组件图标的默认颜色？

当你为MudRating自定义FullIcon和EmptyIcon后，默认的Color属性不会直接作用于这些自定义图标，可通过以下几种方式设置颜色：

方法一：使用MudBlazor内置颜色类（推荐） #

利用组件的SelectedIconClass和EmptyIconClass属性，直接套用MudBlazor提供的文本颜色类，保持主题一致性：

<MudRating @bind-SelectedValue="product_quality" MaxValue="4" 
           FullIcon="@Icons.Material.Rounded.RadioButtonChecked" 
           EmptyIcon="@Icons.Material.Rounded.RadioButtonUnchecked"
           SelectedIconClass="text-info"
           EmptyIconClass="text-gray-400">
</MudRating>

• text-info对应你想要的Info主题色
• text-gray-400是未选中图标的默认灰色，可根据需求替换成其他内置颜色类（如text-secondary）

方法二：自定义CSS类 #

如果需要更个性化的颜色，可自定义CSS类并通过选择器区分选中/未选中状态：

1. 给MudRating添加自定义类：

<MudRating @bind-SelectedValue="product_quality" MaxValue="4" 
           FullIcon="@Icons.Material.Rounded.RadioButtonChecked" 
           EmptyIcon="@Icons.Material.Rounded.RadioButtonUnchecked"
           CssClass="custom-rating">
</MudRating>

2. 在组件样式块或全局CSS中添加样式：

/* 选中的图标颜色 */
.custom-rating .mud-rating-item.mud-selected .mud-icon {
    color: #2563eb; /* 替换为你需要的颜色值 */
}
/* 未选中的图标颜色 */
.custom-rating .mud-rating-item:not(.mud-selected) .mud-icon {
    color: #9ca3af;
}

方法三：内联样式设置 #

直接通过SelectedIconStyle和EmptyIconStyle属性设置内联样式：

<MudRating @bind-SelectedValue="product_quality" MaxValue="4" 
           FullIcon="@Icons.Material.Rounded.RadioButtonChecked" 
           EmptyIcon="@Icons.Material.Rounded.RadioButtonUnchecked"
           SelectedIconStyle="color: #2563eb;"
           EmptyIconStyle="color: #9ca3af;">
</MudRating>

为什么原Color属性不生效？ #

MudRating的Color属性仅对组件默认图标（如星形图标）生效，当替换为自定义图标后，该属性不会自动继承到自定义图标上，因此需要通过上述图标专属的类或样式属性来设置颜色。

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