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

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

.mat选项卡标签{
边界半径：3px；
背景色：#eeeeee；
} 

但它不会重新拼贴角度材质样式。

---

任何自定义样式都不能覆盖角度材质样式。

您可以通过在css类之前添加

/deep/

来实现这一点：

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

或

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

---

更新：

/deep/

和

>

将很快贬值。因此，请使用新的

：：ng deep

（）

---

您可以通过在css类之前添加

/deep/

来实现这一点：

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

或

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

---

更新：

/deep/

和

>

将很快贬值。因此，请使用新的

：：ng deep

（）

封装样式（组件的默认样式）将影响组件的直接子级，但由于

.mat tab label

是选项卡组件的子级，因此您的样式不会影响它

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

关闭组件上的封装：

封装：视图封装。无

将覆盖样式添加到全局样式表

.my tabs.mat tab label{}

在组件样式表中使用不推荐的阴影穿透，例如

&:：ng deep.mat选项卡标签{}

此外，材质构件样式是在实例化构件时加载的，通常位于替代样式之后，因此优先。确保选择器更加具体。

封装样式（组件的默认样式）将影响组件的直接子级，但由于

.mat tab label

是选项卡组件的子级，因此样式不会影响它

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

关闭组件上的封装：

封装：视图封装。无

将覆盖样式添加到全局样式表

.my tabs.mat tab label{}

在组件样式表中使用不推荐的阴影穿透，例如

&:：ng deep.mat选项卡标签{}

---

此外，材质构件样式是在实例化构件时加载的，通常位于替代样式之后，因此优先。确保选择器更加具体。

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

使用

！重要信息

在样式表中标记

创建一个新组件，该组件使用新的

@component

装饰器继承角度材质组件，以定义新样式（在这种情况下，您根本不导入角度材质组件模块）

更改html中样式的顺序。您可以手动将自定义角度材质样式放在

标记后，也可以重新配置网页，使其在

标记后包含style.css

对于第三个选项，要重新配置网页包：

a。添加ngx build plus:

ng添加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：不幸的是，它只在开发配置中工作，我现在不知道如何相应地设置生产配置。因此，在制作过程中，我必须手动将行

放在

标记之后。

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

使用

！重要信息

在样式表中标记

创建一个新组件，该组件使用新的

@component

装饰器继承角度材质组件，以定义新样式（在这种情况下，您根本不导入角度材质组件模块）

更改html中样式的顺序。您可以手动将自定义角度材质样式放在

标记后，也可以重新配置网页，使其在

标记后包含style.css

对于第三个选项，要重新配置网页包：

a。添加ngx build plus:

ng添加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：不幸的是，它只在开发配置中工作，我现在不知道如何相应地设置生产配置。因此，在生产中，我必须手动将行

放在

标记之后。

使其重要。.我也不工作，我认为这是钩子，不是正确的方式。您想使用自己的css覆盖材质css正确。.我认为您使用的是组件css文件。使用一个单独的CSS文件，并在head标记的末尾包含。我在组件CSS文件中写入样式：

styleurl:['./dashboard.component.CSS']

make important。使用一个单独的CSS文件并包含在head标记的末尾。我在组件CSS文件中写入样式：

styleUrls:['./dashboard.component.CSS']

不起作用：

/deep/.mat选项卡标签活动{边框半径：3px；背景：3e4eb8；不透明度：1；颜色：ffffffff；框阴影：0-1px5px0rgba（62、78、184、0.2），0-3px4px0rgba（62,78,184,0.12），0-2px4p0RGBA（62,78,184,0.14）；}

你把它放在哪里？应该放在你的

/dashboard.component.css

/de