如何自定义MudBlazor组件：修改MudSelect选中文本字体大小

需求可实现 #

当然可以实现，直接设置style属性不生效的原因是MudSelect内部负责显示选中文本的元素有自己的默认样式，优先级高于组件根元素的style，需要穿透到内部元素才能生效。

具体操作方法 #

1. 局部自定义（推荐）：CSS类+深度选择器 #

利用Blazor的深度选择器::deep突破样式隔离，针对单个/部分MudSelect生效：
首先在组件的CSS文件（比如YourComponent.razor.css）中添加样式：

.custom-select ::deep .mud-select-text {
    font-size: .75rem;
}

然后在MudSelect上应用这个类：

<MudSelect Class="custom-select" T="string" MultiSelection="true" />

说明：.mud-select-text是MudSelect内部专门用于显示选中文本的元素类名，通过::deep让自定义样式作用到组件内部的这个元素上。

2. 临时场景：内联样式+深度写法 #

如果不想单独写CSS类，也可以直接用内联方式结合深度选择器：

<MudSelect Style="::deep .mud-select-text { font-size: .75rem; }" T="string" MultiSelection="true" />

3. 全局自定义：修改MudBlazor主题 #

如果希望所有MudSelect都使用这个字体大小，可通过全局主题配置实现：
在Program.cs中配置MudServices时添加样式覆盖：

builder.Services.AddMudServices(config =>
{
    config.Styles.Add(new StyleOverride
    {
        Selector = ".mud-select-text",
        Styles = new Dictionary<string, string>
        {
            { "font-size", ".75rem" }
        }
    });
});

MudBlazor组件自定义通用思路 #

• 定位目标元素类名：用浏览器F12开发者工具 inspect组件，找到需要修改的内部元素对应的MudBlazor内置类名（比如输入框的.mud-input、按钮的.mud-button等）。
• 突破样式隔离：Blazor默认开启样式隔离，必须用::deep选择器让自定义样式穿透到组件内部。
• 优先级控制：如果默认样式权重更高，可临时用!important（但优先通过更具体的选择器来提升权重，避免滥用!important）。
• 选择全局/局部方案：局部修改用CSS类+::deep；全局统一修改则通过Theme配置。
• 优先查看组件参数：部分组件提供了直接控制样式的参数（比如InputStyle、LabelStyle），先查官方文档确认是否有现成参数可用，再考虑样式覆盖。

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