[Question] Isolated css won't override e.g. modal-header class

[Odd Anfinn Flakk]

My isolated css class does not update/override the modal-header class, but it will update the h2 inside when specified.

I have figured out that I can actually update the modal-header class if I do it in site.css, but I would rather not do it there and be able to use the isolated css.

Example below:

NewModal.razor

<BSModal DataId="modal1" IsCentered="true">
    <BSModalHeader>
        <h2>Header title</h2>
    </BSModalHeader>
  ...
</BSModal>

NewModal.razor.css

.modal-header {
  border: hidden;
}
.modal-header h2 {
  color: blue;
}

Here "border: hidden;" is not applied and thats the problem

I am using BlazorStrap V5

[John Bomhold]

Blazor limits the depth by default use ::deep
https://learn.microsoft.com/en-us/aspnet/core/blazor/components/css-isolation?view=aspnetcore-7.0

example

::deep h1 { 
    color: red;
}

[Odd Anfinn Flakk]

Thanks!
I figured out that the ::deep pseudo-element would only apply if I wrapped the BSModal in an empty div.
All good now