未找到 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，因为从技术上讲，它们位于子组件中。