Angular 4 Material 个选项卡 - css 未应用于 header 模板

Question

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

但是，无法使用 css 隐藏 header。我不知道为什么。 md-tab-group 是一个 angular 指令，它被替换为选项卡模板。尽管它通常这样喊工作...

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;
     }

Answer 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

Answer 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!

Answer 3

为我替换：

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

至：

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

成功了！

Angular 4 Material 个选项卡 - css 未应用于 header 模板

Angular 4 Material tabs - css not applied to header template

css

angular-material2

angular