在不同的组件中以不同的方式覆盖 Angular Material CSS

Question

我有两个带有选项卡组的组件。一个是主页，我已经覆盖了 css 以使标签更大，使用 ViewEncapsulation.None 完成。另一个是对话框，我想保持它很小，但仍对其应用一些其他自定义样式。

当我在访问其他选项卡页面后打开对话框时，它会复制所有样式，我认为这是因为 ViewEncapsulation.None 会影响 CSS 但并不完全符合预期。

无论如何，是否可以在不更改 ViewEncapsulation 的情况下覆盖 Angular Material 样式，以便我可以将两个组件分开？

Answer 1

解决方案1：您可以将组件的所有元素放入具有css类的父元素中，并将材料样式覆盖到其中。（这是自定义封装）

注意：这里没有 ViewEncapsulation。

组件.html

<div class="my-component__container">
    <!-- other elements(material) are here -->
</div>

组件.scss

.my-component__container{
    // override material styles here
    .mat-form-field{...}
}

解决方案 2：使用/deep/.(已弃用)

:host /deep/ .mat-form-field {
  text-align: left !important;
}

解决方案3：不要改变ViewEncapsulation，然后：

:host {
  .my-component__container{}
}