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

Question

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

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

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

Answer 1

方案一:你可以把你组件的所有元素放到一个有css类的父元素中，然后把material style覆盖进去。(自定义封装)

注意:这里没有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/( deprecated )。(使用 ::ng-depp 代替)

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

解决方案 3:不更改 ViewEncapsulation ，然后:

:host {
  .my-component__container{}
}