Mudblazor - 造型组件：例如：桌子

Question

将样式应用于 MudBlzaor 组件（特别是表格）的正确方法是怎样的？：

\n

代码

\n

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

\n

问题

\n

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

\n

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

\n

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

\n

编辑

\n

任务详细信息.razor

\n

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

\n

任务详细信息.razor.css

\n

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

\n

\n

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

\n

Answer 1

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

您还应该能够像这样直接在组件上设置类（假设 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'ing。尝试将包含添加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 ：