如何覆盖 Angular 2 材质样式？答案

【问题标题】：How to overwrite angular 2 material styles?如何覆盖 Angular 2 材质样式？
【发布时间】：2017-09-27 04:01:32
【问题描述】：

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

它的代码：

<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 上放置一些类，但没有成功。我想举个例子来说明如何放置背景颜色或边框，这会给我一个想法。

提前谢谢你

【问题讨论】：

组件 CSS 不起作用？
我完全不知道如何放置选项的边框。
并不是所有Angular生成的HTML元素都标有组件名，所以组件css的价值有限。

标签： css angular angular-material

【解决方案1】：

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

试试这个：

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

你也可以和theming一起玩。

【讨论】：

注意：/deep/ 选择器以及>>> 和::ng-deep 都已被弃用。更多信息here。不幸的是，似乎没有替代品。
最好有一个替代品。如果没有一个，那将是一个很大的错误。
虽然它已被弃用，但这仍然有效，最快最简单的解决方案。
在 Angular 上使用 ::ng-deep .className { color: #8d062a !important; }

【解决方案2】：

如果您可以使用材料 2 scss 主题解决您的风格问题，那么听到的“正确”方式就是指向该网站的链接。 https://material.angular.io/guide/theming.

但是，我在不希望材质样式覆盖的样式上使用了 !important。

这是我的使用方法：

/*hack to get rid of a scrollbar*/
.cdk-focus-trap-content{
    overflow-x: hidden !important;
}

/*hack to get rid of a padding on the popup*/
.mat-dialog-container{
     padding: 0px !important;
 }

我遇到了一种情况，水平滚动条出现在 md-sidenav 中，我摆脱了 md-dialog 上的默认填充。

不是最优雅的解决方案，但我希望这会有所帮助。

这是另一个讨论 !important 是什么的 StackOverflow 问题。

What does !important in CSS mean?

【讨论】：

是的，我发现我必须在任何地方拍打 !important 才能覆盖 Material 样式。这很烦人。

【解决方案3】：

修改mat-dialog-container等覆盖类样式的正确方法是根据Customizing Angular Material component styles使用panelClass：

在主题设置后将此添加到全局样式表

.myapp-no-padding-dialog .mat-dialog-container {
  padding: 0;
}

使用以下打开对话框

this.dialog.open(MyDialogComponent, {panelClass: 'myapp-no-padding-dialog'})

【讨论】：

我喜欢这个，是迄今为止我见过的最干净的答案。

【解决方案4】：

您可以尝试添加此代码。

.mat-dialog-container{
     padding: 0px !important;
}

如果这不起作用，您可以使用

/deep/.className {
... your code goes here
}

【讨论】：

【解决方案5】：

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

编辑：警告词。我不建议使用此方法（截至 2019 年 1 月），因为设置 ViewEncapsulation.None 将导致任何组件 css 成为全局样式（它会阻止 Angular 为组件范围的 css 创建 ng_xxx 属性）。这将导致全局样式冲突，尤其是延迟加载的模块 css。
我们对 ViewEncapsulation 的解决方案是在 1) 全局 css 或 2) 为某些视图/样式/元素创建单独的样式文件，导入所需的每个组件（例如 styleUrls: [material-table-override.css, component.css]）中使用高度特定的 css 选择器覆盖非常特定的 css。

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

在您的组件上：

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

Here's a great article on the subject

【讨论】：

此解决方案在某些情况下不是最优的，因为如果正在使用 mat-dialog 组件，它会覆盖父组件的 CSS 样式。更好的解决方案应该是在对话框组件的边界内操作材质组件。

【解决方案6】：

每当我必须从 mat-sidenav-container 中删除滚动条时，我都会这样做

   .mat-sidenav-container-classname ::ng-deep mat-sidenav-content {
      overflow: hidden;
    }

【讨论】：

很好的解决方案。防止您对该组件中 mat-sidenav-content 的更改干扰 mat-sidenav-content 的其他实例
很高兴它有帮助！ @clk

【解决方案7】：

::ng-deep 对我来说就像一个魅力......对于 scss 和 sass 文件。

【讨论】：

【解决方案8】：

你可以使用：

::ng-deep {
 .mat-dialog-container{
   padding: 0px 
 }
}

【讨论】：

这是一个非常危险的解决方案，因为这会影响整个应用程序中的所有组件。如果你想要这样，你可以在 gobal style.scss 中覆盖。否则，在 ng-deep 前面加上一些选择器。喜欢 :host ::ng-deep 或 .mat-dialog-override::ng-deep...

【解决方案9】：

任何在 2020 年寻找更清洁方法的人，请按照材料 mat-select documentation 中的建议使用 panelClass。使用 panelClass 属性

【讨论】：

【解决方案10】：

我在使用 Angular Material 时遇到了同样的问题，我检查了 select 元素，检查了它的类并尝试覆盖材质 css 类的 css 规则，甚至尝试使用 !important 标志作为样式规则。但它不起作用。

将所有此类规则从组件移动到 index.html 对我有用。

.mat-select-value,
    .mat-option-text,
    .mat-standard-chip,
    .mat-input-element,
    .mat-menu-item {
         color: #666 !important;
         font-size: 13px !important;
     }
}

【讨论】：

【解决方案11】：

你也可以使用:root

:root {
    .mat-dialog-container{
        padding: 0px 
    }
}

【讨论】：