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;
}