[英]routerLinkActive class dosen't apply if there is already a class present to that component
I came across a wired problem where I have an angular material sidebar and in that I have buttons used for routing the applications let me put the code below我遇到了一个有线问题,我有一个 angular 材料侧边栏,并且我有用于路由应用程序的按钮让我把代码放在下面
<div fxLayoutAlign="start stretch">
<button routerLinkActive="selected" [routerLinkActiveOptions]="{exact:true}" (click)="btnclick('faculty')" mat-flat-button routerLink="/mainview/faculty">
{{'sidebar.faculty' | translate}}
</button>
</div>
so I use button with the applied default style as below in css file所以我在 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;
}
and below is the style I want to apply when the routerLink is Active下面是我想在 routerLink 处于活动状态时应用的样式
.selected{
color: white;
flex-grow: 1;
height: 60px;
text-align: left;
border-bottom: 1px solid;
background-color: #483d8b;
font-weight: 500;
}
but the selected style is not getting applied I tried various hacks to apply it but couldn't work like using routerLinkActive #rla="routerLinkActive" and applying that condition in ngclass etc etc但是选定的样式没有得到应用我尝试了各种技巧来应用它,但无法像使用 routerLinkActive #rla="routerLinkActive" 并在 ngclass 等中应用该条件等
But I came to see the special behaviour that It works if I remove the default style...!!!但是我开始看到如果我删除默认样式它会起作用的特殊行为......!!!
I don't know the the reason why but It works if I remove the default button style.我不知道原因,但如果我删除默认按钮样式,它会起作用。
So can anyone help me to figure out what exactly is needed for this solution as I searched for the similar post but none worked for me..!!所以任何人都可以帮助我弄清楚这个解决方案到底需要什么,因为我搜索了类似的帖子,但没有一个对我有用..!!
This seems to be a CSS specificity problem.这似乎是一个 CSS 特异性问题。
You might want to have a look at these 2 articles which explain this topic very well:您可能想看看这 2 篇文章,它们很好地解释了这个主题:
In this case, .example-container button
is more explicit than .selector
because the first selector has a class and an element(0011), whereas the second one has only a class(0010).在这种情况下, .example-container button
比.selector
更明确,因为第一个选择器有一个 class 和一个元素(0011),而第二个选择器只有一个类(0010)。
A solution would be to make the second selector more specific:一个解决方案是使第二个选择器更具体:
.example-container button.selected { ... }
which has 2 classes and one element.它有 2 个类和一个元素。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.