Angular 覆盖 angular material，用于 3 个不同的组件。有类似的 material

Question

我有 3 个组件，其中包含这些 angular 材料

1. 垫卡内的垫形式
2. 垫卡内的垫扩展面板
3. 分页卡片，卡片内。 所以当我尝试使用 View Encapsulation 覆盖 CSS 样式时，像这样

      encapsulation: ViewEncapsulation.None,
      host:{"class": "app-forms"}// component name here 

我覆盖了表单的组件 CSS 样式。 IT 工作正常，直到我导航到另一个组件，当我返回时表单组件样式被破坏。甚至其他组件样式也已损坏。 （表单组件采用其他组件卡片样式的样式）

我尝试使用 /deep/，因为它已被弃用，对我不起作用 我明白为什么会这样，但我找不到任何解决方法来解决这个问题。

Answer 1

尝试将您自己的 classes 添加到 material 组件并用您自己的 class[=13= 覆盖 material classes ]

例如

<mat-form-field class="custom-form-field"></mat-form-field>

并在 styles.css 文件中

.custom-form-field {
  // your styles
}

.custom-form-field .mat-input-element {
  // your styles for the inner material(html) elements
}