在Angular2中更改md-tab-header的样式

Question

我目前正在开展一个项目，我从之前的同事那里检索过。因此，我一点一点地发现它，并试图解决它的问题。

有一个带有.mat-tab-header类的md-tab-header我希望用我的css来改变它的样式，所以我尝试了类似的东西：

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

或

 md-tab-header.mat-tab-header{
  background-color: blue !important;

}

我将此代码放在特定页面的component.css中，因为我不希望它影响整个项目（否则我会把它放在我的HTML中）。我想我的问题是我无法以这种方式覆盖Angular的风格。 我该怎么办？

我想最干净的方法是改变体系结构，但如果可能的话，我想避免使用它。

Answer 1

您必须在组件声明中使用ViewEncapsulation.None并向CSS文件中添加样式

@Component（{   ....   封装：ViewEncapsulation.None }）