Blazor 忽略组件中的作用域 CSS

Question

我遇到了与上述类似的问题。

组件 MyComponent.razor 具有范围 CSS MyComponent.razor.css。无论如何，CSS 文件的样式有时会被忽略。如果我更改 CSS 它可能会在第一次启动时工作，或者我可能必须构建项目 10 次才能工作。如果我将组件（包括作用域 CSS）从一个文件夹移动到另一个文件夹并将其移回，它更有可能正常工作。

这也不是缓存问题。当我硬刷新浏览器并清除缓存时，CSS 仍然没有加载。在开发工具中，我也无法在捆绑的 CSS 中找到具体的更改。例如，如果在 CSS 中，我只是将 class 的背景颜色从蓝色更改为红色，则捆绑的 CSS.

中的背景颜色仍然是蓝色

在我的 _Host.cshtml 中添加了捆绑样式。

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

Project.Client.csproj不包含

<RazorLangVersion>3.0</RazorLangVersion>

Answer 1

这个问题比较难找，但我找到了解决办法。我遇到的问题是由组件本身引起的。基本上，我的 Pages/Components 看起来像这样：

<MyComponentA></MyComponentA>

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

要使样式生效，我需要使用 ::deep CSS-Keyword 传递样式。否则，样式不会传递给组件。这意味着，我的 CSS 看起来像这样：

::deep .customCssClass {

}

请记住，::deep 需要添加到每个 CSS class，否则它不起作用（至少它对我不起作用）。

另一个问题是我发现在某些情况下它仍然对某些组件不起作用。老实说，我不知道我的代码的哪一部分破坏了它，但解决方法是将整个 Page/Component 包装成 div。我上面的代码看起来像这样：

<div>
   <MyComponentA></MyComponentA>

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

TLDR：将 ::deep 添加到每个 CSS 元素并将 page/component 包装到 div.

Blazor 忽略组件中的作用域 CSS

Blazor ignoring scoped CSS in Components

css

scope

blazor