<div class="navigation">
> <mat-tab-group disableRipple="true" selectedIndex="0">
> <mat-tab label="Label1"> </mat-tab>
> <mat-tab label="label 2"> </mat-tab>
> <mat-tab label="Label 3"> </mat-tab>
> </mat-tab-group>
> </div>
以上是我的html,我想选择label1作为默认选项卡。但是,当我说selectedIndex="0“时,活动样式不是被应用,而是当我单击选项卡时被应用。
当我的选项卡处于活动状态时,标签颜色为白色。默认情况下,使用selectedIndex="0“选择选项卡时,情况并非如此。
我正在使用angular7。下面是我的组件css中的material选项卡样式
与材料标签相关的CSS样式:
.mat-ink-bar{
> background-color: #ffffff !important;
> border-bottom-color:solid #FFFFFF!important;
> width: 113px !important;
> height:4px !important;
> margin-left: 2rem;
> margin-bottom:0px;
>
> }
>
> .mat-tab-label, .mat-tab-label-active{
> color:#FFFFFF;
> background-color: transparent;
> font-family: "verdana";
> font-size: 20px;
> font-weight:500;
> max-width: 113px;
> padding: 0px;
> margin:0px;
> }
请建议一下。先谢了。对格式错误表示歉意。
发布于 2018-12-07 07:42:19
下面是我的组件css中的material选项卡样式
您的样式将无法在组件CSS中工作,因为选项卡组件样式是封装的。您需要将样式放置在全局样式表中,或者使用深度组合器:
/deep/ .mat-tab-ink-bar {
...
}
此外,您的样式对所有标签应用相同的样式,无论是活动的还是非活动的:
.mat-tab-label, .mat-tab-label-active {
很可能是
.mat-tab-label.mat-tab-label-active {
或者只是.mat-tab-label-active
。
https://stackoverflow.com/questions/53662476
复制