角度覆盖角度材质，用于3个不同的零部件.具有相似材料的

Question

我有三个组件，它们具有这些角材料

1. 垫子卡内部的垫子形式
2. 垫卡内部的垫扩展板
3. 卡片内的分页卡片。因此，当我尝试使用视图封装覆盖CSS样式时，如下所示

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

我覆盖了表单的组件CSS样式。在我导航到另一个组件之前，它工作得很好，当我返回时，表单组件样式被破坏了。甚至其他组件样式也是Broken。(表单组件采用其他组件卡片样式的样式(

我尝试使用/dept/，因为它已被弃用，但对我不起作用我理解为什么会发生这种情况，我无法找到任何解决方案来克服这种情况。

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
}