如果该组件已经存在 class,则 routerLinkActive class 不适用
routerLinkActive class dosen't apply if there is already a class present to that component
我遇到了一个有线问题,我有一个 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 对我有用时,任何人都可以帮我弄清楚这个解决方案到底需要什么..!!
这似乎是一个 CSS 特异性问题。
您可能想看看这两篇很好地解释了这个主题的文章:
在这种情况下,.example-container button
比 .selector
更 显式 因为第一个选择器有一个 class 和一个元素 (0011) ,而第二个只有 class(0010).
一个解决方案是使第二个选择器更具体:
.example-container button.selected { ... }
它有 2 个 class 和一个元素。
我遇到了一个有线问题,我有一个 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 对我有用时,任何人都可以帮我弄清楚这个解决方案到底需要什么..!!
这似乎是一个 CSS 特异性问题。
您可能想看看这两篇很好地解释了这个主题的文章:
在这种情况下,.example-container button
比 .selector
更 显式 因为第一个选择器有一个 class 和一个元素 (0011) ,而第二个只有 class(0010).
一个解决方案是使第二个选择器更具体:
.example-container button.selected { ... }
它有 2 个 class 和一个元素。