Razor Pages - CSS Isolation - styles for some HTML tags are not working

user_15039533 0
Viewed 854

I'm trying to style body, header and form tags in my ASP.NET Web App using Razor Pages, CSS Isolation. Styles created in scoped CSS file (_Layout.cshtml.css) for some HTML tags are not working. The same for other components files. Adding a class for those tags and style class selectors in scoped CSS file also doesn't work.

Code - a part of _Layout.cshtml:

    <head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>@ViewData["Title"] - RazorTest</title>
  <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
  <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
  <link rel="stylesheet" href="~/css/_Layout.cshtml.css" asp-append-version="true" />
  <link rel="stylesheet" href="~/RazorTest.styles.css" asp-append-version="true" />
</head>

<body>
  <header>
    <nav>
      <div>
        <img src="" alt="">
        <a href=""></a>
      </div>
    </nav>
  </header>
  <div class="container">
    <form action="">
      <input type="text">
    </form>
    <main role="main" class="pb-3">
      @RenderBody()
    </main>
  </div>

  <footer class="border-top footer text-muted">
    <div class="container">
      &copy; 2022 - RazorTest - <a asp-area="" asp-page="/Privacy">Privacy</a>
    </div>
  </footer>

_Layout.chstml.css:

body {
  background-color: #444;
}

header {
  border: 10px solid red;
}

form {
  border: 10px solid cyan;
}

input {
  border: 10px solid greenyellow;
}

nav {
  border: 10px solid blue;
}

div {
  border: 10px solid black;
}

main {
  border: 10px solid green;
}

img {
  width: 100px;
  height: 100px;
  border: 10px solid orange;
}

Let me show that on SS's: _Layout.cshtml and _Layout.cshtml.css files

Browser output

Everything works well when I move my CSS file to wwwroot/css directory and link it in _Layout.cshtml file. Styles for those tags also works when added to site.css file. Screenshots:

_Layout.cshtml and _Layout.cshtml.css files

Browser output

Why styles for some tags are not working when added in scoped CSS file?

scoped asp.net-core header razor css
3 Answers

Why styles for some tags are not working when added in scoped CSS file?

Maybe iy is not enough tou take precedence.

You can try to use either specificity or the natural cascade to override the styling,so that it may be enough to take precedence.For example,you can change:

img {
  width: 100px;
  height: 100px;
  border: 10px solid orange;
}

to

body > div > img  {
    width: 100px;
      height: 100px;
      border: 10px solid orange;
}

And if you want to change the style which cannot use either specificity or the natural cascade,you can try to add the style into the view,for example:

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

</style>
user_135937360

I encountered similar behavior a few times when testing CSS isolation in ASP.NET 6 with Razor pages.

I noticed that not all HTML element receive a scope identifier and therefore are not affected by the scoped CSS file.

Here's a part of my final [PROJECT_NAME].styles.css file (included as link element in the page layout):

form[b-l6oslukat8] {
    background-color: orange;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

And here is related part of the final HTML file where the identifier (b-l6oslukat8) should be but isn't:

<section b-l6oslukat8="" class="full page">
    <form data-form-type="login">
        <input b-l6oslukat8 type="text" id="Username" name="Username">
        <input b-l6oslukat8 type="password" id="Password" name="Password">
    </form>
</section>

Looks like this is a case with your final HTML/CSS as well. It seems to me it's a bug in the implementation of CSS isolation in .NET 6.

user_72725390

If you use .AddRazorRuntimeCompilation() for hot reload, try build without it. Beside the tag-helper issue mentioned above, it is a build step.

Just one thing to note, CSS isolation is a build step, so it doesn't work with Razor Runtime Compliation Beside tag-helper issue mentioned above, scoped css is build time

Faced the same issue and found this article.

user_55232130
Related