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.

NPadrutt · Accepted Answer · 2020-11-17 23:26:39Z

6

The probelm was two fold:

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>.
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.

answered Nov 17, 2020 at 23:26

NPadrutt

4,3777 gold badges34 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Anzel Over a year ago

This worked for me 100%. I had a regular page where CSS isolation was working perfectly and then I had a razor component where I couldn't get it to work for the life of me. When I surrounded it with a <div></div> tag, BAM! Worked perfectly. Thanks!

Collectives™ on Stack Overflow

Blazor WASM classes in css isolation not found

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related