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

Question

我的 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 中？

预先感谢您的帮助!

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 类的元素。