如果该组件已经存在 class，则 routerLinkActive class 不适用

Question

我遇到了一个有线问题，我有一个 angular material 侧边栏，并且我有用于路由应用程序的按钮让我把代码放在下面

<div fxLayoutAlign="start stretch">
      <button routerLinkActive="selected"  [routerLinkActiveOptions]="{exact:true}" (click)="btnclick('faculty')" mat-flat-button routerLink="/mainview/faculty">
        {{'sidebar.faculty' | translate}}
      </button>
    </div>

所以我在 css 文件

中使用具有应用默认样式的按钮，如下所示

.example-container button{
    color: #DCDCDC;
    flex-grow: 1;
    height: 60px;
    text-align: left;
    border-bottom: 1px solid;
    background-color: #483d8b;
    font-style: normal;
    font-weight: lighter;
  }

下面是我想在routerLink激活时应用的样式

.selected{
    color: white;
    flex-grow: 1;
    height: 60px;
    text-align: left;
    border-bottom: 1px solid;
    background-color: #483d8b;
    font-weight: 500;
  }

但未应用所选样式我尝试了各种技巧来应用它，但无法正常工作使用 routerLinkActive #rla="routerLinkActive" 并在 ngclass 等中应用该条件

但我开始看到如果我删除默认样式它会起作用的特殊行为...!!!

我不知道为什么，但如果我删除默认按钮样式，它会起作用。

当我搜索类似的 post 但 none 对我有用时，任何人都可以帮我弄清楚这个解决方案到底需要什么..!!

Answer 1

这似乎是一个 CSS 特异性问题。

您可能想看看这两篇很好地解释了这个主题的文章：

在这种情况下，.example-container button 比 .selector 更显式因为第一个选择器有一个 class 和一个元素 (0011) ，而第二个只有 class(0010).

一个解决方案是使第二个选择器更具体：

.example-container button.selected { ... }

它有 2 个 class 和一个元素。

如果该组件已经存在 class，则 routerLinkActive class 不适用

routerLinkActive class dosen't apply if there is already a class present to that component

angular

angular-ui-router

angular8

angular-routerlink

routerlinkactive