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

Question

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

不幸的是，我仍然得到了一个"：深"；不是有效的伪元素错误是IDE和样式未被应用。这是我的MainLayout.razor.css样式表中的类：

.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和md灯光样式中概述的材质图标均未应用。

My _Host.cshtml Head如下所示：

<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

事实证明，我需要直接在我的Razor页面上添加一个CSS样式表，从主站点.CSS和MainLayout.Razor.CSS文件中删除所有条目，现在一切都很好-不：：需要深度！