Blazor WASM classes in css isolation not found

user_2838509 0
Viewed 1158

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

enter image description here

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.

blazor css
1 Answers

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.

user_28385090
Related