未找到 css 隔离中的 Blazor WASM 类

Question

我有一个 blazor wasm 应用程序，我尝试添加一个具有 css 隔离的 css 文件。我的文件结构如下所示：

我在布局标头中的代码是：

<Header Style="background: #fff; border-bottom: 1px solid #E5E5E5" Class="header-layout">
    <div class="header-logo">
        <img src="images/logo.png" alt="Logo" width="80" />
    </div>
    <div class="header-avatar">
        <Avatar Style="background-color: #87d068" Icon="user" />
    </div>
</Header>

我的index.html中有这个链接：

<link href="[Projectname].Client.styles.css" rel="stylesheet">

CSS代码是：

.header-layout {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center
}

.header-logo {
    flex-grow: 0
}

.header-avatar {
    flex-shrink: 0
}

当我将 css 移至 app.css 时，它会正确应用。但是当在 LayoutHeader.razor.css 中时它不会执行任何操作。style.css 已正确解析（或者至少我在控制台上没有看到任何错误）。缓存已禁用，我尝试重新加载所有内容。

Answer 1

问题有两个方面：

1. 由于某种原因，razor.cs 文件中不能仅包含 Blazor 组件。这样该属性就无法应用。所以你必须用<div></div>.

2. 、header-layout和需要在其前面有，因为从技术header-logo上讲它们位于子组件中。header-avatar::deep