Unable to apply isolated style to MudDialog using Class API

[aDisplayName]

Bug type

Component

Component name

MudDialog

What happened?

When displaying dialog using dialogbox service with a dialog template defined in a separate razor component, the class defined in the component css file are not correctly applied.

Here is the Counter.razor page which display the dialog when clicking the button.

@inject IDialogService _dialogService
@page "/counter"

<PageTitle>Counter</PageTitle>

<MudText Typo="Typo.h3" GutterBottom="true">Counter</MudText>
<MudText Class="mb-4">Current count: @currentCount</MudText>
<MudButton Color="Color.Primary" Variant="Variant.Filled" @onclick="IncrementCount">Click me</MudButton>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
      _dialogService.Show<Box>("title", new DialogParameters(), new DialogOptions()
      {
        CloseButton = true,
        FullWidth = true
      });
    }
}

Here is the dialog component razor file: Box.razor

<MudDialog Class="redhello">
  <DialogContent>
    <div>Hello</div>
    <div class="redhello">the world</div>
  </DialogContent>
</MudDialog>

And here is the style defined in the Box.razor.css

.redhello
{
  color: red;
  background-color: lightyellow;
}

Here is the result after the dialogbox is displayed.

And here is the DOM:

<div id="dialog_25e09353" class="mud-dialog-container mud-dialog-center">
  <!--!-->
  <div class="mud-overlay mud-overlay-dialog" style="">
    <div class="mud-overlay-scrim mud-overlay-dark"></div>
  </div>
  <!--!-->
  <div id="_afb70383163c486d8c560f0201d0f6f8" role="dialog"
    class="mud-dialog mud-dialog-width-sm mud-dialog-width-full redhello">
    <div class="mud-dialog-title">
      <!--!-->
      <h6 class="mud-typography mud-typography-h6 mud-inherit-text">title</h6>
    </div>
    <!--!-->
    <!--!-->
    <!--!-->
    <!--!-->
    <div class="outline-none" style="Style" tabindex="-1" _bl_8="">
      <div class="fixed pointer-events-none" tabindex="0"></div>
      <!--!-->

      <div class="fixed pointer-events-none" tabindex="0" _bl_9=""></div>
      <!--!-->

      <div class="fixed pointer-events-none" tabindex="-1" _bl_10=""></div>
      <!--!-->

      <div class="mud-dialog-content">
        <!--!-->
        <div b-cgqs55320o="">Hello</div>
        <!--!-->
        <div class="redhello" b-cgqs55320o="">the world</div>
      </div>
      <!--!-->

      <div class="fixed pointer-events-none" tabindex="0" _bl_11=""></div>
      <!--!-->

      <div sclass="fixed pointer-events-none" tabindex="0"></div>
    </div>
  </div>
</div>

As we can see, that the "redhello" is applied to both muddialog, and the inner div, but due to the lack of b-cgqs55320o attribute in the muddialog level, the style is not applied to the dialog level.

I understand that the b-cgqs55320o comes from the CSS Isolation. The problem is I cannot figure it a way to apply the style contained in the component.razor.css when CSS isolation is not disabled.

Expected behavior

The custom style is applied to the entire dialog:

Reproduction link

https://github.com/aDisplayName/bugsamplecode/tree/main/20220411

Reproduction steps

When displaying dialog using dialogbox service with a dialog template defined in a separate razor component, the class defined in the component css file are not correctly applied.

Here is the page which display the dialog when clicking the button.

@inject IDialogService _dialogService
@page "/counter"

<PageTitle>Counter</PageTitle>

<MudText Typo="Typo.h3" GutterBottom="true">Counter</MudText>
<MudText Class="mb-4">Current count: @currentCount</MudText>
<MudButton Color="Color.Primary" Variant="Variant.Filled" @onclick="IncrementCount">Click me</MudButton>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
      _dialogService.Show<Box>("title", new DialogParameters(), new DialogOptions()
      {
        CloseButton = true,
        FullWidth = true
      });
    }
}

Here is the dialog component razor file: Box.razor

<MudDialog Class="redhello">
  <DialogContent>
    <div>Hello</div>
    <div class="redhello">the world</div>
  </DialogContent>
</MudDialog>

And here is the style defined in the Box.razor.css

.redhello
{
  color: red;
  background-color: lightyellow;
}

Here is the result after the dialogbox is displayed.

And here is the DOM:

<div id="dialog_25e09353" class="mud-dialog-container mud-dialog-center">
  <!--!-->
  <div class="mud-overlay mud-overlay-dialog" style="">
    <div class="mud-overlay-scrim mud-overlay-dark"></div>
  </div>
  <!--!-->
  <div id="_afb70383163c486d8c560f0201d0f6f8" role="dialog"
    class="mud-dialog mud-dialog-width-sm mud-dialog-width-full redhello">
    <div class="mud-dialog-title">
      <!--!-->
      <h6 class="mud-typography mud-typography-h6 mud-inherit-text">title</h6>
    </div>
    <!--!-->
    <!--!-->
    <!--!-->
    <!--!-->
    <div class="outline-none" style="Style" tabindex="-1" _bl_8="">
      <div class="fixed pointer-events-none" tabindex="0"></div>
      <!--!-->

      <div class="fixed pointer-events-none" tabindex="0" _bl_9=""></div>
      <!--!-->

      <div class="fixed pointer-events-none" tabindex="-1" _bl_10=""></div>
      <!--!-->

      <div class="mud-dialog-content">
        <!--!-->
        <div b-cgqs55320o="">Hello</div>
        <!--!-->
        <div class="redhello" b-cgqs55320o="">the world</div>
      </div>
      <!--!-->

      <div class="fixed pointer-events-none" tabindex="0" _bl_11=""></div>
      <!--!-->

      <div sclass="fixed pointer-events-none" tabindex="0"></div>
    </div>
  </div>
</div>

As we can see, that the "redhello" is applied to both muddialog, and the inner div, but due to the lack of b-cgqs55320o attribute in the muddialog level, the style is not applied to the dialog level.

I understand that the b-cgqs55320o comes from the CSS Isolation. The problem is I cannot figure it a way to apply the style contained in the component.razor.css when CSS isolation is not disabled.

Relevant log output

No response

Version (bug)

6.0.9

Version (working)

No response

What browsers are you seeing the problem on?

Microsoft Edge

On what operating system are you experiencing the issue?

Windows

Pull Request

• [ ] I would like to do a Pull Request

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[Xorpio]

I found a possible solution/reason. As stated in the following blog: https://www.daveabrock.com/2020/09/10/blazor-css-isolation

It states that you need to wrap a simple

arround your component.:

<div>
  <MudDialog Class="redhello">
    <DialogContent>
      <div>Hello</div>
      <div class="redhello">the world</div>
    </DialogContent>
  </MudDialog>
</div>

This might be your solution.