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

Question

将样式应用到 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 元素上使用类。

标签： blazormudblazor

Answer 1

我认为您可能正在寻找 CSS Isolation - 请参阅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>

由于没有 ID，<table>那么 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 ：