在不同的组件中以不同的方式覆盖Angular Material CSS [英] Override Angular Material CSS differently in different components

问题描述

我有两个带有选项卡组的组件.一个是主页，我已经覆盖了CSS以使标签变大，这是使用ViewEncapsulation.None完成的.另一个是对话框，我希望将其保持较小，但仍要对其应用其他自定义样式.

I have two components with tab groups in them. One is a main page and I have overwritten the css to make the labels larger, done using ViewEncapsulation.None. The other is a dialog, and I want to keep it small but still apply some other custom styles to it.

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

When I open the dialog after visiting the other tabs page, it copies all the styles, which I have figured is because ViewEncapsulation.None bleeds CSS but not exactly as expected.

总有一种方法可以覆盖Angular Material样式而不更改ViewEncapsulation，以便我可以将两个组件分开吗?

Is there anyway to override Angular Material styles without changing ViewEncapsulation so that I can keep the two components separate?

推荐答案

解决方案1:您可以将组件的所有元素放入具有CSS类的父元素中，并在其中覆盖材质样式.(这是自定义封装)

Solution 1: you can put all elements of your component into a parent element with a css class and override the material style into it.(it's custom capsulation)

注意:此处没有ViewEncapsulation.

Note: ViewEncapsulation is none here.

component.html

component.html

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

component.scss

component.scss

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

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

Solution 2: use /deep/.(deprecated)

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

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

Solution 3: don't change ViewEncapsulation , then:

:host {
  .my-component__container{}
}

这篇关于在不同的组件中以不同的方式覆盖Angular Material CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！