角度覆盖角度材料，用于 3 个不同的组件。有类似的材料

Question

我有 3 个组件，其中有这些角材料

1. mat-card 内的 mat-forms
2. 垫卡内的垫子扩展面板
3. 分页卡，卡内。 因此，当我尝试使用 View Encapsulation 覆盖 CSS 样式时，就像这样

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

我覆盖了表单组件的 CSS 样式。 IT 工作正常，直到我导航到不同的组件，当我回来时，表单组件样式被破坏。甚至其他组件样式都被破坏了。 （表单组件采用其他组件卡片样式的样式）

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

Answer 1

尝试将您自己的类添加到材质组件中，并通过您自己的类覆盖材质类

例如

<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
}