Target body tag when using ASP.NET Core CSS isolation

Question

I'm using "CSS isolation" with Razor Pages.

I have a _Layout.cshtml and _Layout.cshtml.css. I want to apply a background color to the body. So I tried body { background-color: red }.

But that generates css with an isolation attribute, e.g. html body[b-d29f2jaemq] { background-color: red); }. The html and body tags don't have such attributes.

Is there a way to target the body tag in a CSS isolation file?

Answer 1

But that generates css with an isolation attribute, e.g. html body[b-d29f2jaemq] { background-color: red); }. The html and body tags don't have such attributes.

Is there a way to target the body tag in a css isolation file?

I can reproduce this problem, so this might be a bug or by design. I suggest you post this question to the ASP.NET Core GitHub repository, then the developer team will investigate it.

As a temporary workaround, you can try adding body { background-color: red } to the site.css file in the wwwroot folder, and add this file reference in the layout page:

<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />