Blazor WASM classes in css isolation not found

Question

I have a blazor wasm application and I try to add a css file with css isolation. My File structure looks like this:

And my code in the Layout header is:

<Header Style="background: #fff; border-bottom: 1px solid #E5E5E5" Class="header-layout">
    <div class="header-logo">
        <img src="images/logo.png" alt="Logo" width="80" />
    </div>
    <div class="header-avatar">
        <Avatar Style="background-color: #87d068" Icon="user" />
    </div>
</Header>

And I have this Link in my index.html:

<link href="[Projectname].Client.styles.css" rel="stylesheet">

And the css code is:

.header-layout {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center
}

.header-logo {
    flex-grow: 0
}

.header-avatar {
    flex-shrink: 0
}

When I move the css to the app.css it is applied correctly. But when in the LayoutHeader.razor.css it doesn't do anything. The style.css is correctly resolved (or at least I don't see any errors on the console). Cache is disabled and I tried reloading everything.

Answer 1

The probelm was two fold:

1. For some reason you cannot have only a Blazor Component in a razor.cs file. That way the attribute cannot be applied. So you would have to surround it with a <div></div> .

2. The header-layout , header-logo and header-avatar need to have a ::deep in front of it, since technically they are in a child component.