Applying css isolation for body tag in blazor

Question

I want to update the body tag of the page by updating it through a razor component's CSS file(isolation).

I have a razor component. now I want to update the body tag of this page. so the first thing I tried was updating the body tag through CSS file of the razor component like below.

body {
    background-color: red !important;
}

The above did not work, next thing I kept the body tag in style tag of the razor component like below.

<style>
    body{
        background-color: #FFFFFF;
    }
</style>

which did work. Just want to understand why CSS isolation did not work for this.

Note: <link href="{ProjectName}.styles.css" rel="stylesheet" /> is already present in the head tag of _host.cshtml file.

Answer 1

Try adding "::deep" before the CSS class in the style sheet. so it will be:

 ::deep body {
    background-color: red;
}