angular - 影响子选项卡的 Mat-Tab 背景颜色

Question

我正在使用 Angular 8 和Angular 材质选项卡

我在选项卡中创建了一个选项卡，我的代码如下所示：

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

我只想为 Level 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;
}