[Question] Isolated css won't override e.g. modal-header class
OddMann opened this issue · 2 comments
OddMann commented
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
jbomhold3 commented
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;
}
OddMann commented
Thanks!
I figured out that the ::deep pseudo-element would only apply if I wrapped the BSModal in an empty div.
All good now