将 Active Class 设置为样式隔离答案

【问题标题】：Set ActiveClass via style isolation将 Active Class 设置为样式隔离
【发布时间】：2021-05-31 07:13:59
【问题描述】：

想象以下NavigationMenuItem 组件：

@inherits NavLink

<div>
    <NavLink ActiveClass="navigationmenuitem-active" @attributes="@AdditionalAttributes">
        @ChildContent
    </NavLink>
</div>

我希望能够通过样式隔离设置NavLink 的ActiveClass 属性。

这有可能吗？

在为ActiveClass 全局定义类时，我得到了可以使用的样式，但我不太喜欢使用全局样式。

我找到了一种解决方法，即不使用ActiveClass 属性，而是在隔离的css 文件中使用::deep a.active。但这感觉不对。

那么有没有一种方法可以让我按照我想要的方式使用ActiveClass？

【问题讨论】：

通过隔离我假设您的意思是 Blazor 组件 CSS。我在开箱即用的 NavMenu 元素上设置了活动类，如下所示ActiveClass="nav-link-active"，然后添加到组件 css 类::deep .nav-link-active { background-color:blueviolet;} 它起作用了 - 活动时呈紫色。我假设你理解::deep。
@ShaunCurtis 就像一个魅力。没有考虑在课堂上应用::deep，我感到很愚蠢。这很有意义！如果您提供您的评论作为答案，我会接受！
NP，很高兴为您提供帮助。完成。

标签： css blazor

【解决方案1】：

在组件上使用 Blazor 隔离 CSS。设置：

<NavLink ActiveClass="nav-link-active" .....>

然后在组件 CSS 中为菜单组件：

::deep .nav-link-active { background-color:blueviolet;}

这会使活动链接变成可怕的紫色。

::deep 告诉 Blazor 组件渲染将样式沿树向下应用到所有子组件。 <NavLink> 是一个子组件，而不是菜单组件 HTML 的一部分。请参阅MS Docs information 了解更多信息。

【讨论】：