将 Active Class 设置为样式隔离

Posted 2023-03-07

【中文标题】将 Active Class 设置为样式隔离

【英文标题】：Set ActiveClass via style isolation

【发布时间】：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，很高兴为您提供帮助。完成。

【参考方案1】：

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

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

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

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

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

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