Question

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

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

但它不会重新定位Angular Material样式。任何自定义样式都不能覆盖Angular Material样式。

Answer 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);
}

Answer 2

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

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

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

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

a。添加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>行。

Answer 3

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

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

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

此外，在实例化组件时会加载材质组件样式，并且在覆盖样式之后通常会，因此优先。请务必使您的选择器更加具体。

如何自行替换Angular Material Styles？

3 个答案: