Blazor CSS isolation

gistfile1.txt

You have to use "::deep" on CSS that is applied to custom components such as MudBlazor components. Custom components have to be enclosed in a nativ component thus the "<div>".

"::deep" CSS does not work on nativ components as it seems.

@page "/"

<h1>@pageTitle</h1>

<div class="mainPaper">
      @DateTime.Now.ToLongTimeString()
      <MudPaper Class="mainPaper" Elevation="8">
          <h1>Tesst </h1>
          @for( int i = 0; i < 2; i++ )
          {
              <MudText Class="mainPaper">@DateTime.Now.ToLongTimeString()</MudText>
              <MudText Class="mainPaper">@DateTime.Now.ToLongTimeString()</MudText>
          }
      </MudPaper>
      <MudText Class="mainPaper">@DateTime.Now.ToLongTimeString()</MudText>
      <MudText Class="mainPaper">@DateTime.Now.ToLongTimeString()</MudText>
</div>

@code {
 [Parameter]
 public string pageTitle { get; set; } = "default";
}

//*.razor.css
::deep .mainPaper {
    color: red;
    background: lightgreen;
}

.mainPaper {
    color: red;
    background: lightgreen;
}