CSS ::Deep Pseudo-Element 在 .NET 5 和 6 的 Blazor 中不起作用

Posted 2023-03-27

【中文标题】CSS ::Deep Pseudo-Element 在 .NET 5 和 6 的 Blazor 中不起作用

【英文标题】：CSS ::Deep Pseudo-Element Not Working in Blazor with .NET 5 & 6

【发布时间】：2021-12-25 01:38:21

【问题描述】：

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

不幸的是，我仍然收到 "::deep" is not a valid pseudo-element 错误是 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 >
        My Context Menu Is Above!
      </div>
    </div>
</div>

deviceWrapper 和 material-icons-outlined md-light 样式均未应用。

我的 _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 样式应用于子元素？

谢谢！

【参考方案1】：

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