如何覆盖 angular2-mdl 的默认 CSS？答案

【问题标题】：How do I override angular2-mdl's default CSS?如何覆盖 angular2-mdl 的默认 CSS？
【发布时间】：2017-03-07 18:59:54
【问题描述】：

我的 Angular2 应用程序进展顺利，再次感谢您阐明如何使用 MDL 中的 scss 文件（已回答 here）。

但是，我现在无法覆盖 MDL 设置的某些默认样式。例如，我不希望标签栏中的标签使用“justify-content: center”，而是使用“justify-content: flex-start”，所以标签左对齐。

我最初的方法是尝试通过提供以下内容来覆盖该属性：

.mdl-tabs__tab-bar {
    justify-content: flex-start;
}

直接在包含选项卡的组件的 scss 文件中。

但这不适用于 Angular2 范围我的选择器，例如像这样

.mdl-tabs__tab-bar[_ngcontent-eph-22]

因此它们从不适用。那么覆盖 MDL 的默认样式的正确方法是什么？我是否必须将我想要覆盖的所有内容都放在全局 styles.sass 中？

提前感谢您的帮助！

【问题讨论】：

好的，我发现我可以覆盖全局“styles.sass”中的样式。这是唯一的方法还是正确的方法？

标签： angular angular2-mdl

【解决方案1】：

据我所知，您可以使用/deep/ 选择器（或>>>）覆盖。您必须将此 css 添加到您的 AppComponent 的样式中。

:host /deep/ .mdl-tabs__tab-bar {
    justify-content: flex-start;
}

如果您将其添加到AppComponent，那么无论您在何处添加选项卡，都会覆盖此样式。如果您只想为某些组件覆盖它，则将此 css 添加到该组件。

read more

【讨论】：

不幸的是，这是deprecated。

【解决方案2】：

默认情况下，angular 2 组件设置为encapsulation: ViewEncapsulation.Emulated，这会将唯一的组件属性附加到组件样式。这样它的样式就可以特定于组件。

我们可以通过在组件元数据中设置encapsulation: ViewEncapsulation.None来避免将唯一的组件属性添加到样式中。

import {ViewEncapsulation} from '@angular/core';

@Component({
  templateUrl: 'component.template.html',
  styleUrls: [`component.style.scss`],
  encapsulation: ViewEncapsulation.None
})

现在在您的 scss 文件中设置以下内容。

.mdl-tabs__tab-bar {
    justify-content: flex-start;
}

它将应用于所有出现mdl-tabs__tab-bar 类的元素。

【讨论】：