CSS Selector to override MudBlazor styles, but only in certain containers

Question

How can I override library classes, but only within a specific container that I've styled with my own class?

I think I am just not understanding how to format the right selector. Here's the background: I am not a CSS expert, but we lost ours, and now the Data Base Guy has to push through :) We use the MudBlazor library in server-side Blazor, but I think this is "just a CSS" question.

The library pre-defines certain styles, and we need to override them. For example, the library defines .mud-table-dense .mud-table-row .mud-table-cell, which, if I understand correctly, means applied to mud-table-cell when inside mud-table-row inside mud-table-dense. (I could look up the styles in their source, but as far as the project is concerned, these "base styles" are buried deep in the library, somewhere.)

The earlier code in our project just over-rode the styles in our own project.css like this:

.mud-table-dense .mud-table-row .mud-table-cell {
    padding: 2px 0 0 2px;
    padding-inline-end: 24px;
    padding-inline-start: 24px;
}

Trouble is that doing so breaks some other scenarios where we want to use their default formats. Keep in mind that I can't change the styles attached to the <td> or <th> directly (at least in most cases), but I can wrap the whole generated output in a div or style one of the higher-level containers in the library with a class.

So, if I wrap the generated table in a "mycontainer" class, I thought I should be able to change the selector to:

.mycontainer .mud-table-dense .mud-table-row .mud-table-cell {

but, then the they don't seem to apply at all.

The .razor html looks like:

<div class="mycontainer">
    <MudDataGrid>
        <!--- Table details -->
    </MudDataGrid>
</div>

So my question boils down to: Given generated content from a library that creates low level elements like that are styled with classes, how can I override those classes, but only within a specific container that I've styled with my own class?

Answer 1

I don't usually answer my own question, but in case this ever comes up in a search.

The question: Given generated content from a library that creates low level elements like that are styled with classes, how can I override those classes, but only within a specific container that I've styled with my own class?

The (very specific) answer for styling a table generated by MudBlazor's MudTable component:

tbody.mud-table-body tr.mud-table-row > td.elk-table-90-l,
thead.mud-table-head tr.mud-table-row > th.elk-table-90-l,
col.elk-table-90-l {
    width: 90px;
    overflow: hidden;
    text-overflow: clip;
    padding: 0;
    padding-inline-end: 6px;
    padding-inline-start: 0px;
    text-align: left;
}

tbody.mud-table-body tr.mud-table-row > td.elk-table-dec-r,
thead.mud-table-head tr.mud-table-row > th.elk-table-dec-r,
col.elk-table-dec-r {
    width: 120px;
    overflow: hidden;
    text-overflow: clip;
    padding: 0 35px 0 0 !important;
    /* padding-inline-end: 30px;
    padding-inline-start: 0px;*/
    text-align: right;
}

thead.mud-table-head tr.mud-table-row > th.elk-table-dec-r.sort {
        /* Take back out some padding in the header to allow for the hidden sort-icon*/
        padding: 0 12px 0 0 !important;
}


.elks-table div.mud-table-container table tbody tr,
.elks-table div.mud-table-container table tbody tr *
.elks-table div.mud-table-container table tbody tr td,
.elks-table div.mud-table-container table tbody tr th * {
        overflow-y: hidden;
        vertical-align: middle;
        height: 30px;
        padding: 0;
}

.elks-table tbody tr.mud-table-row td.mud-table-cell ,
.elks-table thead tr.mud-table-row th.mud-table-cell {
    padding: 0 12px 0 0 ;
}

.elks-table table,
.elks-table .mud-table-root {
    table-layout: fixed;
}

I applied:

• elks-table to <MudTable> to used fixed table layout and to lock the row height
• elks-table-90-l to <col> in <ColGroup> to set the column width
• elks-table-90-l to <MudTh> and <MudTd> to set alignment and such

I could break the settings for the TH and the TD into separate rules, but I preferred keeping them together and using one style for all three places in the markup (col, mudth, mudtd).

It might be possible to further simplify, but I stopped after I got all that I needed working.