How to pass Style to ChildContent in a Blazor Componant (.Net 5 Webassembly Blazor Project)

Posted 3 years ago by Andreas

Edited 3 years ago

Hello,

Sorry posted it to the wrong category :(.

I have this Blazor component with ChildContent (RenderFragment Property). The componant serves as a busy indicator where all content inside the Busycontainer the mouseevents are disabled and opacity is reduced plus a busy indicator is shown. It works well, but I was not able to apply the following style to the ChildContent. My question would be how do I pass styles down to the Childcontent?

css:

.busyindicator > * {
    opacity: 0.3 !important;
    pointer-events: none !important;
}

Part of the Blazor Busyindicator Componant:

...
<div class="busyindicator">
    @ChildContent
    @if (IsBusy)
    {
        <div>
            <SpinKitFadingCircle/>
        </div>
    }
</div>
...

Implementation:

...
<BusyIndicator IsBusyOnLoad="true">
        <div class="sidebar">
            <NavMenu />
        </div>
        <div>
            <div class="content px-4">
                @Body
            </div>
        </div>
</div>
        ...

Thanks a lot I would appreciate any sort of help! Kind blessings, Andreas

Try adding ::deep like this

.busyindicator ::deep > * {
    opacity: 0.3 !important;
    pointer-events: none !important;
}

Posted 3 years ago by selliott

0

Thanks a lot that works!!
Does 'deep' stay or will it be discontinued in future browser version?
In that case would there be an alternative?
Thanks a lot, kind blessings, Andreas

Posted 3 years ago by Andreas

Post a Reply

You must be logged in to add a new post.

Number of online users: 0