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

Question

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

但是，我现在无法覆盖 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 中？

在此先感谢您的帮助！

Answer 1

默认情况下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 class 的元素。

Answer 2

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

的样式中

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

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

read more

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

How do I override angular2-mdl's default CSS?

angular2-mdl

angular