如何修改MudSelect与MudList组件的字体大小和间距？

直接给MudListItem设置Style无效，是因为组件内部的文本元素（.mud-list-item-text）自带优先级更高的样式，外层容器的样式无法穿透覆盖。下面是几种可行的解决方法：

方法1：使用深度选择器（推荐，针对局部组件） #

利用Blazor的::deep穿透样式隔离，直接修改内部文本元素的样式：

针对MudList #

<MudList>
    <MudListItem Class="custom-list-item">@context.Name</MudListItem>
</MudList>

<style scoped>
::deep .custom-list-item .mud-list-item-text {
    font-size: 10px; /* 设置字体大小 */
    line-height: 1.2; /* 调整行高控制上下间距 */
    margin: 3px 0; /* 额外调整上下外边距 */
}
</style>

针对MudSelect #

MudSelect的下拉项本质也是MudListItem，同样可以用这个方式：

<MudSelect T="YourDataType" Class="custom-select">
    @foreach (var item in Items)
    {
        <MudSelectItem Value="@item">@item.Name</MudSelectItem>
    }
</MudSelect>

<style scoped>
::deep .custom-select .mud-list-item-text {
    font-size: 10px;
    line-height: 1.1;
}
</style>

方法2：直接给文本元素设置样式 #

把文本包裹在<span>或<div>里，直接给内部元素设置样式，优先级更高：

<MudListItem>
    <span style="font-size:10px; line-height:1.2; margin:2px 0;">@context.Name</span>
</MudListItem>

方法3：全局修改（通过MudBlazor主题） #

如果需要所有MudList/MudSelect的项都生效，可以全局配置主题：

// Program.cs
builder.Services.AddMudServices(config =>
{
    // 直接覆盖.mud-list-item-text的全局样式
    config.Styles = new Dictionary<string, string>
    {
        { ".mud-list-item-text", "font-size: 10px; line-height: 1.2;" }
    };

    // 或者修改Typography的body1样式（因为MudListItem默认使用body1）
    config.Theme.Typography.Body1 = new Typography
    {
        FontSize = "10px",
        LineHeight = "1.2"
    };
});

注意：修改Typography会影响所有使用body1样式的组件，需谨慎使用。

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