如何覆盖angular 2材质样式？

Question

我在角材料中有这个选择：

它的代码：

 <md-select placeholder="Descuentos y convenios" [(ngModel)]="passenger.discount">
        <md-option [value]="null" [disabled]="true">
            Descuentos
        </md-option>
        <md-option *ngFor="let option of discounts" [value]="option">
            {{ option }}
        </md-option>
        <md-option [value]="null" [disabled]="true">
            Convenios
        </md-option>
        <md-option *ngFor="let option of agreements" [value]="option">
            {{ option }}
        </md-option>
</md-select>

我想在里面有这样的风格：

我试图在 md-select 和 md-option 上放置一些类，但没有奏效。我想也许只是一个如何放置背景颜色或边框的例子，这会给我一个想法。

先感谢您

原文由 Kimy BF 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我认为类应该可以工作，但是由于视图封装，您可能需要使用 /deep/ 。

尝试这个：

 /deep/ md-select.your-class {
  background-color: blue;
}

你也可以玩 主题。

原文由 André 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

/deep/ 、 >>> 和 ::ng-deep 的顶级解决方案已被弃用，不应再使用。

现在推荐的方法是视图封装

---

编辑：警告词。我完全不建议使用此方法（截至 2019 年 1 月），因为设置 ViewEncapsulation.None 将导致任何组件 css 成为全局样式（它阻止 Angular 为组件范围的 css 创建 ng_xxx 属性）。这将导致全局样式冲突，尤其是延迟加载的模块 css。

我们对 ViewEncapsulation 的解决方案是使用高度特定的 css 选择器覆盖非常特定的 css 1) 全局 css 或 2) 为某些视图/样式/元素创建单独的样式文件，导入到每个所需的组件中（例如 styleUrls: [material-table-override.css, component.css] ） .

---

我使用 ViewEncapsulation.None 在 Angular 6 的单个组件中成功覆盖了材质表样式。

在您的组件上：

 import { ViewEncapsulation } from '@angular/core';
// ...
@Component({
    // ...
    encapsulation: ViewEncapsulation.None,
})

这是一篇关于这个主题的好文章

原文由 Andrew 发布，翻译遵循 CC BY-SA 4.0 许可协议