MudBlazor MudIconButton禁用时图标置灰实现问题咨询

下面给你三种可行的实现方式，按需选择：

方案一：用CSS滤镜（推荐，无需额外图标） #

不用准备两套图标，直接通过CSS给禁用状态的图标添加灰度滤镜，一步到位。

在你的组件样式或全局样式文件中添加这段代码：

/* 针对禁用的MudIconButton里的图标应用灰度 */
.mud-icon-button:disabled .mud-svg-icon image {
    filter: grayscale(100%);
    opacity: 0.6; /* 可选，降低透明度让禁用状态更明显 */
}

添加后，所有标记为Disabled="true"的MudIconButton，图标都会自动变成灰色，完全不用修改现有按钮代码。

方案二：条件切换图标路径（需准备两套图标） #

如果必须用单独的灰色图标文件，就根据按钮的禁用状态动态切换图片地址。

假设你已经准备了Full.png（正常）和Full-disabled.png（灰色）这类成对的图标，修改单个按钮的代码如下：

<MudIconButton id="full" @ref="full" 
               OnClick="@((e) => SetSelection(e, full, builderRow))" 
               Icon="@($"<svg width='24' height='24'><image href='/assets/images/{builderRow.canChooseFull ? "Full" : "Full-disabled"}.png' width='24' height='24'/></svg>")" 
               Disabled="!builderRow.canChooseFull" />

其他按钮同理，把Full替换成对应的图标名称（比如LeftHalf、RightHalf等）即可。

方案三：内联SVG直接修改样式（进阶优化） #

如果把PNG转成内联SVG（直接写SVG代码而非引用图片），可以更灵活地控制禁用状态的样式：

<MudIconButton id="full" @ref="full" 
               OnClick="@((e) => SetSelection(e, full, builderRow))" 
               Disabled="!builderRow.canChooseFull">
    <svg width='24' height='24' style="@(!builderRow.canChooseFull ? "filter: grayscale(100%);" : "")">
        <!-- 这里替换成你的SVG path内容 -->
        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z" 
              fill="@(builderRow.canChooseFull ? "#333" : "#ccc")" />
    </svg>
</MudIconButton>

这种方式不需要额外图标文件，还能直接修改填充色或滤镜，适合对样式控制要求更高的场景。

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