Blazor ignoring scoped CSS in Components

Question

I have a similar problem as mentioned here.

The component MyComponent.razor has the scoped CSS MyComponent.razor.css. Anyways, the style of the CSS file SOMETIMES is ignored. If I change the CSS it might work on the first start, or it might happen that I have to build the project 10 times before it works. If I move the Component (including the scoped CSS) from one folder to another and move it back, it is more likely to work as well.

It is also not a caching issue. When I hard refresh the browser and clear the cache, the CSS is still not loaded. In the dev tools, I am also not able to find the specific changes in the bundled CSS. E.g., if in the CSS I simply change the background-color of a class from blue to red, the background-color is still blue in the bundled CSS.

Within my _Host.cshtml the bundled style is added.

<head>
...
    <link href="<applicationName>.Client.styles.css" rel="stylesheet" />
</head>

Project.Client.csproj does not contain a

<RazorLangVersion>3.0</RazorLangVersion>

Did you find any solution? I'm meeting same issue – Matias Masso May 26 '22 at 16:31 — Matias Masso, May 26 '22 at 16:31
@MatiasMasso I just posted my fix, maybe it helps you. – Zumpel May 31 '22 at 08:34 — Zumpel, May 31 '22 at 08:34

score 1 · Accepted Answer · answered May 31 '22 at 08:33

The issue was relatively hard to find, but I found the solution. The problems I faced were caused by the components themselves. Basically, my Pages/Components look something like this:

<MyComponentA></MyComponentA>

<div>
   <MyComponentB></MyComponentB>
   <MyComponentC class="customCssClass">
      <MyComponentD></MyComponentD>
   </MyComponentC>
</div>

To make styling work, I need to pass down the style with the ::deep CSS-Keyword. Otherwise, the style is not passed down to the component. This means, my CSS looks something like this:

::deep .customCssClass {

}

Keep in mind, that ::deep needs to be added to every CSS class, otherwise, it doesn't work (at least it didn't for me).

Another issue is that I found that under certain circumstances it still didn't work for some components. I honestly have no idea which part of my code breaks it, but the fix was to wrap the entire Page/Component into a div. My code from above would look something like this then:

<div>
   <MyComponentA></MyComponentA>

   <div>
      <MyComponentB></MyComponentB>
      <MyComponentC class="customCssClass">
         <MyComponentD></MyComponentD>
      </MyComponentC>
   </div>
</div>

TLDR: Add ::deep to every CSS element and wrap the page/component into a div.

Blazor ignoring scoped CSS in Components

1 Answers1