I have a Blazor app that I was running in Visual Studio 2019/.NET 5 and then, due to this issue, I moved to Visual Studio 2022/.NET 6 and upgraded the Blazor app accordingly.
Unfortunately, I am still getting a "::deep" is not a valid pseudo-element error is the IDE and the styles are NOT being applied. Here is the class in my MainLayout.razor.css stylesheet:
.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);
}Here is the razor page code to which this styles are not being applied!
<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>Neither the deviceWrapper nor the material-icons-outlined md-light styles are being applied.
My _Host.cshtml Head looks as follows:
<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">Any I missing a CSS attribute or is there some other way to apply CSS styles to child elements?
Thank you!