Razor Class 库中的 Blazor 组件（CSS 隔离）

Question

我创建了一个组件：

MyComponent.razor

并添加了一个 css 文件：

MyComponent.razor.css

css文件嵌套在Visual Studio的组件文件下，所以我知道没有拼写错误。这是在 Razor class 库中。

我的行为很奇怪，我追踪到 class 名称与 bootstrap class 的冲突，它也加载到我的 Index.cshtml 文件中。

我在我的组件中重命名了我的 class 名称以避免冲突，一切都如我所料。

但是，我的理解是对 css 文件使用此命名约定意味着 HTML 中的所有 class 名称和 CSS 中的 class 名称文件会得到这个随机 b-?????????? suffix/attribute 以避免此类名称冲突。

我是不是误解了CSS隔离？

Answer 1

文档说

For each styled component, an HTML attribute is appended with the format b-<10-character-string>.

您可以在浏览器中检查 {Project Name}.styles.css 文件以查看生成的 css，例如

h1[b-3xxtam6d07] {
    color: brown;
}

一定要包含 ::deep 以便 CSS 到达 MyComponent 的子组件。

Answer 2

CSS 隔离仅适用于 .razor 页面，因此选择器仍会从其他 .css 文件

中找到没有 ::deep 的子组件

Blazor Component in Razor Class Library (CSS Isolation)