Mudblazor - 样式组件：例如：表格

问题描述

如何将样式应用到 MudBlzaor 组件（尤其是表）的正确方法是？：

<MudTable>
    <HeaderContent>
        <MudTh> Some Random Header</MudTh>
        ...
    </HeaderContent>
    <RowTemplate>
        <MudTd> Some Random Content</MudTd>
    </RowTemplate>
</MudTable>

问题

1：我能否以任何方式应用样式，它会应用于组件内的所有元素，在本例中，将样式应用于 <HeaderContent> 并且所有 <MudTh> 都会拥有它。

2：如何使用Class属性？我在 <MudTh> 中使用了它，但它不起作用（我什至在检查模式下都找不到它，它已应用于元素但不会出现在样式部分中）。

PS：我可以将内联样式应用于元素，但这似乎既不可行也不可扩展。

编辑

taskDetails.razor

<MudTable>
    <HeaderContent>
        <MudTh Class="tableHeader"><MudTableSortLabel SortBy="new Func<TaskItemdisplayModel,object>(x => x.Name)"></MudTableSortLabel>Name</MudTh>
        @*<MudTh Style="font-weight:bold;"><MudTableSortLabel SortBy="new Func<TaskItemdisplayModel,object>(x => x.Name)"></MudTableSortLabel>Name</MudTh> THIS WORKS*@

taskDetails.razor.css

...
.tableHeader {
    font-weight:bold;
}
...

注意我可以在其他非 MudBlazor 元素上使用类。

解决方法

我认为您可能正在寻找 CSS 隔离 - 参见 MS Docs - Css Isolation。

您还应该能够像这样直接在组件上设置类（假设 MudBlazor 允许）：

<MudTd class="table-row"> Some Random Content</MudTd>

如果您使用组件 Css 并且它在父组件上，那么您需要将 deep 属性应用于 Css 类，以便子组件能够使用它。

::deep td.table-row { 
    color: red;
}

根据问题中的新信息进行更新

如果您的组件 Css 配置正确，您应该会看到类似这样的内容

<table b-2rnu6n50b3 class="mud-table-root">
....
</table>

因为 <table> 上没有 ID，所以 MudBlazor 可能不处理 ID。尝试添加一个包含 div 到 TableDetails.razor

<div>
<MudTable>
    <HeaderContent>
        <MudTh Class="tableHeader"><MudTableSortLabel SortBy="new Func<TaskItemDisplayModel,object>(x => x.Name)"></MudTableSortLabel>Name</MudTh>
......
</div>

然后检查 div 是否获得了正确的 ID。

您可以在 obj 隐藏文件夹中看到 css 文件和 ID：

blazor mudblazor