Mat-Tab背景色会影响子标签

Question

我正在使用Angular 8和Angular Material Tab

我在Tab中创建一个Tab，我的代码如下所示：

<mat-tab-group [backgroundColor]="primary">
    <mat-tab label="All Taxonomy">
        <div>
              <app-main-stats></app-main-stats> //<-- this component will contain another tab
        </div>
      </mat-tab>
</mat-tab-group>

  

在 main-stats.component.html

 <mat-tab-group>
        <mat-tab label="Basic">
            <div>
                  Tab content
            </div>
          </mat-tab>
    </mat-tab-group>

我只想为1级标签着色。但是Tab子项也受到影响，是否有任何解决方法？

Answer 1

是的，只需在CSS上指定颜色即可。

.html：

<mat-tab-group id="parent">
    <mat-tab label="All Taxonomy">
        <div>
      Child:
            <mat-tab-group>
                <mat-tab label="Basic">
                    <div>
                        Tab content
                    </div>
                </mat-tab>
            </mat-tab-group>
        </div>
    </mat-tab>
</mat-tab-group>

.css：

::ng-deep #parent > mat-tab-header {
  background-color:#673ab7;
}
::ng-deep #parent > mat-tab-header > .mat-tab-label-container > .mat-tab-list > .mat-tab-labels > .mat-tab-label {
  color: #fff;
}
::ng-deep #parent > mat-tab-header > .mat-tab-label-container > .mat-tab-list > mat-ink-bar {
  background-color:#fff;
}