How to target FluentStack and FluentSplitter css with my class

[prod42net]

<FluentStack Orientation="Orientation.Horizontal" Class="jbwg-designer">
    <FluentSplitter Class="jbwg-splitter" Orientation="Orientation.Horizontal" Panel2Size="15%">
        <Panel1>

            <JBWGDesignerCanvas></JBWGDesignerCanvas>
        </Panel1>
        <Panel2>
            <JBWGObjectDesigner></JBWGObjectDesigner>

        </Panel2>
    </FluentSplitter>
</FluentStack>

I know that might be simple ...but I am just not getting my issue currently.
I want to adjust the height and width and a little more of both... FluentStack and FluentSplitter with the custom css class
somehow it does not work. I can put in the styles directly - works just fine but in a css it doesn't.
I see that the files are downloaded with the classes jbwg-... and the styles are on the element applied but the values are not displayed and not applied.

where is my brain-dead-lock ... I tried many things in the css like
that or with .stack-horizontal.jbwg-designer , or with ::deep before ...what would be the solution
I really want those changes in the specific component.razor.css file and not global or in styles properties.
What am I doing wrong?

.jbwg-designer {
    border: 1px solid #9a9a9a;
    height: 100%;
    width: 100%;
}


.jbwg-splitter {
    height: 100%;
    width: 100%;
}

[dvoituron-msft]

Are you using CSS isolation? You probably need to encapsulate your code in a global div. Correct?

See https://dvoituron.com/2025/10/17/blazor-scoped-css/

[prod42net]

Thanks, I got it running!

So any plain html element can be the root and its class attribute gets assigned just fine.

If I build a blazor component and give it a Class property, what I assign to class does not work. If I do the same with style ...it works as expected. What do I not understand here? Is it by design?

@page "/test"
<JBTest Class="jb-test" Style="background-color: cornflowerblue">Hello world</JBTest>

.jb-test{
    background-color: aqua;
    width: 100%;
    height: 100%;
}

<div class="@Class" style="@Style" >
    @ChildContent
</div>

@code {
    [Parameter] public RenderFragment? ChildContent { get; set; }
    [Parameter] public string? Class { get; set; }
    [Parameter] public string? Style { get; set; }
}

[vnbaaij]

Although a general Blazor question and nt specific to the library, let's see if we can help you out.

What you have should work. You are however setting the background color both with class and with style. Inline style will always take precedence.