Angular 4 Material 选项卡 - css 不适用于标题模板答案

【问题标题】：Angular 4 Material tabs - css not applied to header templateAngular 4 Material 选项卡 - css 不适用于标题模板
【发布时间】：2018-01-13 09:54:22
【问题描述】：

我想隐藏 Angular 材质选项卡的标题（按钮），因为我使用自定义导航按钮在选项卡之间切换。 https://material.angular.io/components/tabs/overview

但是，无法使用 css 隐藏标题。我不知道为什么。 md-tab-group是一个角度指令，它被标签模板替换。尽管它通常以这种方式大喊工作......

HTML：

     <div class="tabs">
        <md-tab-group>
           <md-tab label="Tab 1">Content 1</md-tab>
           <md-tab label="Tab 2">Content 2</md-tab>
        </md-tab-group>
     </div>

CSS：

     .tabs md-tab-header, .tabs .mat-tab-header {
        display: none;
     }

【问题讨论】：

为什么有一个, 逗号？
这样你可以为不同的css类声明一个样式。但这并没有导致问题，我也单独尝试过。
在LESS file 你可以使用它们。你可以创建一个 plunker 来重现。如果对您有帮助，请参考此answer

标签： css angular angular-material2

【解决方案1】：

你可以试试下面的css：

::ng-deep .tabs .mat-tab-list .mat-tab-labels {
        display: none;
}

html:

<md-tab-group class="tabs">
  <md-tab label="Tab 1">Content 1</md-tab>
  <md-tab label="Tab 2">Content 2</md-tab>
</md-tab-group>

Plunker

【讨论】：

::ng-deep 是 angular 提供的阴影穿透组合子，可用于覆盖预建样式表的 css 类。你可以阅读它here。对于 CSS 的其余部分，我从开发人员工具中发现需要覆盖 mat-tab-labels 类以隐藏标题按钮而不是 mat-tab-header。额外的.tabs 类在其中，因此此样式仅适用于使用tabs 类的md-tab-group，而不是全部覆盖所有md-tab-group。
这对我有用，没有 ::ng-deep for angular 5。谢谢！

【解决方案2】：

Angular4:

template:  
<mat-tab-group class="tabs">
    <mat-tab>
        <ng-template mat-tab-label>Tasks<ng-template>
        <app-ongoingtasks></app-ongoingtasks>
    </mat-tab>
</mat-tab-group>

css:
::ng-deep .tabs .mat-tab-list .mat-tab-labels {
    margin: auto;
    width: 60%;
}

Perfect!

【讨论】：

【解决方案3】：

替我替换：

.mat-tab-header{
  background: red !important;
}

到：

::ng-deep .mat-tab-header{
  background: red !important;
}

成功了！

【讨论】：

你可以用 ::ng-deep 覆盖任何东西。这些所有答案的问题在于，在某些情况下，您不允许使用 ::ng-deep 或者当您有一堆选项卡并且相同的样式应用于所有选项卡时（使用 ::ng-deep 时） )。