CODEWITHSUNDEEP
blazormudblazor
Henrique Pombo
Henrique Pombo

Reputation: 613

Mudblazor - Styling Components: e.g:Table

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

enter image description here

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

Upvotes: 8

Views: 16190

Answers (1)

MrC aka Shaun Curtis
MrC aka Shaun Curtis

Reputation: 30072

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:

enter image description here

Upvotes: 8

Related Questions