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

Question

我的Angular2应用程序正在取得很好的进展，再次感谢您澄清如何使用MDL中的scss文件(回答了here)。

但是，我现在很难覆盖MDL设置的某些默认样式。例如，我不希望选项卡中的选项卡使用“正当性-内容:中心”，而是使用“正当性-内容: flex-start"，因此选项卡左对齐。

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

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

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

但这不能作为我的选择器的Angular2作用域，例如：

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

所以他们从来没有申请过。那么，重写MDL默认样式的正确方法是什么呢？我是否必须将我想要覆盖的所有内容都放在全局styles.sass中？

提前感谢您的帮助！

Answer 1

默认情况下，使用encapsulation: ViewEncapsulation.Emulated设置角2分量，这将在组件样式中添加唯一的组件属性。以便它的样式可以特定于组件。

通过在组件元数据中设置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类的所有元素的出现。

Answer 2

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

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

如果将它添加到AppComponent中，那么无论在何处添加选项卡，它都会被重写。如果只想对某些组件重写它，则将此css添加到该组件中。

read more