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?

Answer 1

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

Blazor Scoped Css