css - 使用类的角度材料选项卡自定义

Question

我已经完成了 mat-tab 自定义，如下所示

.mat-tab-label {
     font-weight:300; 
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    color:white !important;
    font-size:18px;
    opacity: 1 !important
}

.mat-tab-link {
    color:white !important;
}

.mat-ink-bar {
    background-color: white !important
}

.mat-tab-label-active {
    font-weight:300; 
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    color:white !important;
    font-size:18px;
    opacity: 1 !important
 }

该选项卡看起来像

<mat-tab-group>
  <mat-tab label="Sales">
    <div fxLayout="row" fxFlex="100%"> </div>
  </mat-tab>
  <mat-tab label="Service">
    <h1>Some more tab content</h1>
    <p>...</p>
  </mat-tab>
</mat-tab-group>

我有两个问题：

1. 墨水条颜色没有改变
2. 我有两个不同的标签组。我想给它们设计不同的样式。因此，使用上述解决方案，它基本上会全局更改所有选项卡组件。如何将它们转换为特定的 CSS 类？我确实尝试过喜欢.my-label并使用它，class="my-label"但这不起作用。

Answer 1

一种解决方案是使用::ng-deep覆盖默认的 css 属性。

所以你的 CSS 变成：

::ng-deep .mat-tab-label {
     font-weight:300; 
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    color:white !important;
    font-size:18px;
    opacity: 1 !important
}

:ng-deep .mat-tab-link {
    color:white !important;
}

::ng-deep .mat-ink-bar {
    background-color: white !important
}

ng:deep .mat-tab-label-active {
    font-weight:300; 
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    color:white !important;
    font-size:18px;
    opacity: 1 !important
 }

关于您问题的第二点，只需将这些 CSS 属性包装在不同的类中并在需要时使用它们。