Mudblazor

Question

如何将样式应用到 MudBlazaor 组件的正确方法，特别是应用到 table？：

代码

<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 元素上使用类。

Answer 1

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

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

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

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

::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：

Mudblazor - 样式组件：例如：Table

Mudblazor - Styling Components: e.g:Table

blazor

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