Question

我的Angular2应用程序取得了良好的进展，再次感谢您澄清如何使用MDL中的scss文件（已解答here）。

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

我最初的做法是尝试通过提供：

来覆盖该属性

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

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

但是，当Angular2限制我的选择器时，这不会起作用，例如：像这样

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

因此他们永远不会申请。那么什么是覆盖MDL默认样式的正确方法呢？我是否必须在全局styles.sass？

中放置我想要覆盖的所有内容

提前感谢您的帮助！

Answer 1

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

的样式中

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

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

read more

Answer 2

默认情况下，使用update Sj set sj.WeekNo = @WeekNo, sj.StartDateEntry = @StartDate from [StudentJournal] Sj where AdminNo = @AdminNo;设置angular 2组件，它会将唯一组件属性附加到组件样式。因此它的样式可以特定于组件。

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

encapsulation: ViewEncapsulation.None

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

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

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

它将适用于.mdl-tabs__tab-bar { justify-content: flex-start; }类的所有元素。

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

2 个答案: