Asp.NetCore Blazor Using CSS

Question

I have done all of my coding in desktop so far.Now I am learning blazor.How does CSS classes work.I was under the impression that the classes were isolated within the component but it seems this is incorrect!

Component 1.

//Component One;
<h3 class="my-h3">One</h3>
<style>
   .my-h3{
       background-color:red;
   }
</style>

@code {

}

Component Two:

//component 2
 <h3 class="my-h3">Two</h3>
 <style>
    .my-h3{
        background-color:blue;
    }
 </style>
 @code {

 }

Index Page:

@page "/"
<One></One>
<Two></Two>
Welcome to your new app.

Both compents have a background of red. I thought that the classes would be self-contained but I guess not. Is there a recognised way to deal with styling components?

CSS Isolation is currently planned for : 5.0.0-preview7, that should be out in a few weeks. — Henk Holterman
– Henk Holterman, Commented Jun 11, 2020 at 12:44

m5c · Accepted Answer · 2020-06-11 11:30:22Z

2

I think you are looking for scoped styles . You can add this using a nuget package BlazorScopedCss .

Blazor Scoped Css

answered Jun 11, 2020 at 11:30

m5c

5678 silver badges13 bronze badges

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

1 Comment

jegtugado Over a year ago

Seems like css in Blazor is not scoped by default. Scoping css was not a thing back then. Good find.

Collectives™ on Stack Overflow

Asp.NetCore Blazor Using CSS

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