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