CSS ::Deep 伪元素在 .NET 5 和 6 的 Blazor 中不起作用

Question

我有一个 Blazor 应用程序，我在 Visual Studio 2019/.NET 5 中是运行然后，由于这个问题，我搬到了 Visual Studio 2022/.NET 6并相应地升级了 Blazor 应用程序。

不幸的是，我仍然收到 "::deep" is not a valid pseudo-element 错误是 IDE 并且未应用样式。这是我的 MainLayout.razor.css 样式表中的 class：

.deviceWrapper, ::deep .deviceWrapper {
    border-radius: 5px;
    height: 100px;
    width: 400px;
    background-color: #f6f6f6;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.26), 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.08);
}

这是未应用此样式的剃刀页面代码！

<div class="target-wrapper" style="width:400px">
    <div class="deviceWrapper">
      <TelerikContextMenu IdField="@menuId" Selector="@targetNameWithDot" Data="@MenuItems" OnClick="@((ContextMenuItem item) => OnItemClick(item, @thisDevice.DeviceIDHash))">
      </TelerikContextMenu>
      <div class="@targetName" style="text-align:right;">
        <span class="material-icons-outlined md-light">menu</span>
      </div>
      <div width="100%">
        My Context Menu Is Above!
      </div>
    </div>
</div>

既没有应用 deviceWrapper 也没有应用 material-icons-outlined md-light 样式。

我的_Host.cshtml头像如下：

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="~/" />
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link href="vBear-Frontend.styles.css" rel="stylesheet" />
    <link rel="stylesheet" href="_content/Telerik.UI.for.Blazor.Trial/css/kendo-theme-default/all.css" />
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

我是否缺少 CSS 属性，或者是否有其他方法可以将 CSS 样式应用于子元素？

谢谢！

Answer 1

事实证明，我需要将 CSS 样式表直接添加到我的 Razor 页面，从主 site.css 和 MainLayout.razor.css 文件中删除所有条目，现在一切正常- 不需要 ::deep！

CSS ::Deep 伪元素在 .NET 5 和 6 的 Blazor 中不起作用

CSS ::Deep Pseudo-Element Not Working in Blazor with .NET 5 & 6

css

blazor

blazor-server-side

pseudo-element