如何自己替换 Angular Material 样式？

Question

我尝试像这样更改 style.css 组件文件中的 CSS 样式：

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

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

Answer 1

您可以通过在 css class 之前添加 /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);
}

Answer 2

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

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

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

此外，material 组件样式在实例化组件时加载，并且通常在您的重写样式之后，因此优先。请务必使您的选择器更具体一些。

Answer 3

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

在样式表中使用 !important 标记。
创建一个新的组件继承angular-material组件，使用新的@Component装饰器来定义新样式（在这种情况下，您不导入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> 标记之后。

如何自己替换 Angular Material 样式？

How to replace Angular Material Styles on own?

material-design

angular-material

angular-material2

angular