0

我创建了一个组件：

MyComponent.razor

并添加了一个css文件：

MyComponent.razor.css

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

我遇到了奇怪的行为，我追踪到与引导类的类名冲突，该引导类也加载到我的 Index.cshtml 文件中。

我在组件中重命名了我的类名以避免冲突，并且一切都按我预期的那样工作。

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

我是否误解了 CSS 隔离？

4

2 回答 2

2

文档说

对于每个样式化的组件，都会附加一个 HTML 属性，其格式为b-<10-character-string>。

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

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

确保包含::deep，以便 CSS 到达 MyComponent 的子组件。

这是来源：https ://docs.microsoft.com/en-us/aspnet/core/blazor/components/css-isolation?view=aspnetcore-5.0#css-isolation-bundling

于 2020-12-30T20:53:08.503 回答
1

CSS 隔离仅适用于 .razor 页面，因此选择器仍然可以在没有::deep其他 .css 文件的情况下找到子组件

于 2020-12-30T21:15:50.143 回答