如何自定义Mat-Tab？

Question

我正在尝试自定义非活动 mat-tabs 的颜色，但我找不到文档来找到要使用的确切规则。我尝试了其他答案，但它们已经过时，不适用于我的情况。

我找到了这个规则的答案：

    .mat-mdc-tab-group,
    .mat-mdc-tab-nav-bar {
  --mat-tab-header-active-focus-label-text-color: #151414;
  --mat-tab-header-active-label-text-color: #151414;
  --mat-tab-header-inactive-label-text-color: rgb(0 0 0 / 60%);
  --mat-tab-header-inactive-focus-label-text-color: rgb(236 131 218 / 60%);
  --mat-tab-header-inactive-hover-label-text-color: rgb(236 131 218 / 60%);
  --mdc-tab-indicator-active-indicator-color: #242022;
  --mat-tab-header-active-hover-label-text-color: #5052c3;
  --mat-tab-header-active-ripple-color: #c2185b;
  --mat-tab-header-inactive-ripple-color: #232222;
}

它有效，但我没有看到更改非活动选项卡背景颜色的规则。

有办法找到完整列表吗？

Answer 1

如果您检查 mat 选项卡的 css，您将看到这些可配置的 css 变量

.mat-primary.mat-mdc-tab-group,.mat-primary.mat-mdc-tab-nav-bar {
    --mdc-tab-indicator-active-indicator-color: #005cbb;
    --mat-tab-header-divider-color: #e0e2ec;
    --mat-tab-header-pagination-icon-color: #1a1b1f;
    --mat-tab-header-inactive-label-text-color: #1a1b1f;
    --mat-tab-header-active-label-text-color: #1a1b1f;
    --mat-tab-header-active-ripple-color: #1a1b1f;
    --mat-tab-header-inactive-ripple-color: #1a1b1f;
    --mat-tab-header-inactive-focus-label-text-color: #1a1b1f;
    --mat-tab-header-inactive-hover-label-text-color: #1a1b1f;
    --mat-tab-header-active-focus-label-text-color: #1a1b1f;
    --mat-tab-header-active-hover-label-text-color: #1a1b1f;
    --mat-tab-header-active-focus-indicator-color: #005cbb;
    --mat-tab-header-active-hover-indicator-color: #005cbb
}

背景颜色在 CSS 中被硬编码为

none

。我想这只是透明背景的材质规格。

因此，如果您需要此类自定义，那么您应该为您的案例定义一个全局样式，如下所示

/* default background for all tab headers */
.mdc-tab { 
    background: red;
}

/* override default background for active tabs */
.mdc-tab.mdc-tab--active {
    background: blue;
}

因此，您将拥有红色的非活动选项卡和蓝色的活动选项卡