角形材料自定义选项卡，使用css操作，其他解决方案不工作，是否发生任何更新？

wqsoz72f 于 2023-01-10 发布在其他

关注(0)|答案(1)|浏览(120)

<mat-tab  aria-label="primary"></mat-tab>>
   <ng-template mat-tab-label  class="template-label">
      <mat-icon class="example-tab-icon">message</mat-icon>
   </ng-template>
       Content 1
</mat-tab>

<mat-tab>
  <ng-template mat-tab-label >
    <mat-icon class="example-tab-icon">person</mat-icon>
  </ng-template>
       Content 2
</mat-tab>

<mat-tab >
  <ng-template mat-tab-label>
     <mat-icon class="example-tab-icon">search</mat-icon>
  </ng-template>
       Content 3
</mat-tab>
</mat-tab-group>

这是html文件中的代码，如何在上面应用css，我尝试了在ts文件中封装，并尝试了多种方法来改变css，但没有工作

css

来源：https://stackoverflow.com/questions/75008949/angular-material-custom-tabs-manipulate-using-css-other-solutions-not-workin

1条答案

按热度按时间

t9aqgxwy1#

下面是我如何从页面中定位元素并选择它

::ng-deep .mdc-tab-indicator--active .mat-icon{
  background: #5dc3bd;
  color: #fff;

}
::ng-deep .mdc-tab-indicator--active{
  background: #5dc3bd;
  color: #fff;

}

::ng-deep .mat-mdc-tab-labels{
  background: rgb(230,231,232);
  border-top-left-radius: 5px;

}

::ng-deep #mat-tab-label-0-0{

  border-top-left-radius: 5px;
}

赞(0）回复(0）举报 2023-01-10

我来回答

角形材料自定义选项卡，使用css操作，其他解决方案不工作，是否发生任何更新？

1条答案

相关问题

热门标签

最新问答