Mudblazor - Styling Components: e.g:Table

Question

How is the correct way to apply styiling to a MudBlzaor component, in specific, to a table?:

Code

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

Questions

1: Can I apply a style in any way it will apply to all elements inside the component, in this example apply a style to <HeaderContent> and all <MudTh> would have it.

2: How to use the Class property? I have use it in <MudTh> but it doesn't work (I can't even find it in inspect mode, it is applied to the element but it won't appear in the styles section).

PS: I can apply inline Style to the elements, but that doesn´t seem neither feasible nor scalable.

EDIT

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;
}
...

Note I can use classes on other non-MudBlazor elements.

Answer 1

I think your probably looking for CSS Isolation - see MS Docs - Css Isolation.

You should also be able to set the class directly on the component like this (assuming MudBlazor allows it):

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

If your using component Css and it's on the parent component, then you'll need to apply the deep attribute to the Css class for the child components to be able to use it.

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

Update based on new Info in Question

If your component Css was correctly configured you should see something like this

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

As there's no Id on <table> then maybe MudBlazor doesn't handle the ID'ing. Try adding a containing div to TableDetails.razor

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

Then check that the div gets the correct ID.

You can see the css files and the IDs in the obj hidden folder: