Angular Material: clicked/active 时更改选项卡的背景颜色

Question

我想删除在 angular material 中单击选项卡时应用的背景色效果：

这里是md-tabs

的link

当我点击选项卡时，我可以看到背景色应用于 div 元素：

这是screenshot

我尝试使用以下代码覆盖样式，但没有生效：

.md-ripple-container:active{
    background-color: none; !important
}

求助！！

Answer 1

只需使用 css 中的 .md-tab.md-active class。请看下面的例子。

http://codepen.io/next1/pen/JXbVQN

Answer 2

您可以覆盖 scss/css 中的 material 样式。像这样：

/deep/ .mat-tab-group.mat-primary mat-tab-label-active{
  background-color: red;
}

由于视图封装，你需要使用/deep/选择器，这样你就可以获取到Material class组件已渲染。