时间戳

首页 > 解决方案 > CSS ::Deep Pseudo-Element 在 .NET 5 和 6 的 Blazor 中不起作用

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

问题描述

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

不幸的是，我仍然收到“::deep”不是有效的伪元素错误是 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 和 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 样式应用于子元素？

谢谢！

标签： cssblazorblazor-server-sidepseudo-element

解决方案

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

推荐阅读