如何自行替换 Angular 材质样式？答案

【问题标题】：How to replace Angular Material Styles on own?如何自行替换 Angular 材质样式？
【发布时间】：2018-01-08 10:42:43
【问题描述】：

我尝试在组件文件的 style.css 中更改 CSS 样式，如下所示：

.mat-tab-label {
  border-radius: 3px;
  background-color: #eeeeee;
}

但它不会取代 Angular Material 样式。任何自定义样式都不能覆盖 Angular Material 样式。

【问题讨论】：

重要..
我也不行，我觉得是钩子，不对
您想使用自己的 css 正确覆盖材料 css..
我认为您正在使用组件 CSS 文件。使用单独的 CSS 文件并包含在 head 标签的末尾。
我在组件 CSS 文件中编写样式：styleUrls: ['./dashboard.component.css']

标签： angular angular-material material-design angular-material2

【解决方案1】：

您可以通过在 css 类之前添加 /deep/ 来实现：

/deep/ .mat-tab-label {
  border-radius: 3px;
  background-color: #eeeeee;
}

或

>>> .mat-tab-label {
  border-radius: 3px;
  background-color: #eeeeee;
}

更新：

/deep/ 和 >>> 将很快贬值。所以使用新的::ng-deep (Details Here)

::ng-deep .mat-tab-label {
  border-radius: 3px;
  background-color: #eeeeee;
}

::ng-deep .mat-tab-label-active {
    border-radius: 3px;
    background: black;
    opacity: 1;
    color: #ffffff;
    box-shadow: 0 -1px 5px 0 rgba(62, 78, 184, 0.2), 0 -3px 4px 0 rgba(62, 78, 184, 0.12), 0 -2px 4px 0 rgba(62, 78, 184, 0.14);
}

【讨论】：

不起作用：/deep/ .mat-tab-label-active { border-radius: 3px; background: #3e4eb8; opacity: 1; color: #ffffff; box-shadow: 0 -1px 5px 0 rgba(62, 78, 184, 0.2), 0 -3px 4px 0 rgba(62, 78, 184, 0.12), 0 -2px 4px 0 rgba(62, 78, 184, 0.14); }
你把那个放在哪里？应该在你的./dashboard.component.css
/deep/ 已弃用，未来版本将不再支持。
@Daniel，如果有帮助，请将答案标记为已接受，以便其他人在遇到类似问题时也能从中受益
请注意，所有 3 个都已弃用 angular.io/guide/component-styles#deprecated-deep--and-ng-deep

【解决方案2】：

由于 html 中样式的特定顺序，您无法更改 Angular Material 样式。因此，Angular 将您的 style.css 放在首位，在任何 Angular 组件的样式（包括 Angular Material）之前。因此，设计 Angular Material 组件的方法很少：

在样式表中使用!important 标签。
创建一个新组件，它使用新的@Component 装饰器继承 angular-material 组件以定义新样式（在这种情况下，您根本不需要导入 Angular Material 组件模块）。

更改 html 中样式的顺序。您可以手动将自定义 Angular Material 样式放在 <body> 标记之后，或者重新配置 WebPack 以在 <body> 标记之后包含您的 styles.css。

至于第三个选项，重新配置WebPack：

一个。添加ngx-build-plus：ng add ngx-build-plus

b.创建一个文件 ng-plugin.ts:

export default {
  pre() {
  },
  config(cfg) {
    const util = require('util');
    for (const rule of cfg.module.rules) {
      if ('include' in rule && rule.use[0] === 'style-loader') {
        rule.use[0] = { loader: 'style-loader', options: { insertInto: 'body' } };
      };
    }
    return cfg;
  },
  post() {
  }
};

c。编译文件：tsc ng-plugin.ts

d。添加到 angular.json

"serve": {
  ...
  "options": {
    ...
    "plugin": "~ng-plugin"
  }
}

PS：不幸的是，它只适用于开发配置，我现在不知道如何相应地设置生产配置。所以，在生产中，我必须手动将<link rel="stylesheet" href="styles.2c8b1779b4d75bca36df.css"> 放在<body> 标记之后。

【讨论】：

【解决方案3】：

封装样式（组件的默认设置）会影响组件的直接子组件，但由于.mat-tab-label 是选项卡组件的子组件，因此您的样式不会影响它。

您应该执行以下操作之一：

关闭组件的封装：encapsulation: ViewEncapsulation.None
将覆盖样式添加到全局样式表.my-tabs .mat-tab-label { }
在组件样式表中使用不推荐使用的阴影穿透，例如 & ::ng-deep .mat-tab-label { }

此外，材质组件样式会在组件实例化时加载，并且通常会出现在您的覆盖样式之后，因此具有优先权。一定要让你的选择器更具体一点。

【讨论】：

我这样做了，但我必须为属性设置!important。
您是否使选择器更具体，如最后一段所述？另见github.com/angular/material2/issues/6087
!important 不应该是必需的，并且每个元素都可以在没有它的情况下设置样式，只要您的样式没有被封装并且比材质选择器更具体