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

问题描述

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

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

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

解决方案

解决方案 1:你可以将你的组件的所有元素放到一个带有 css 类的父元素中，并将材质样式覆盖到其中.(它是自定义封装)

注意:此处没有 ViewEncapsulation.

component.html

<!-- 其他元素(材料)在这里-->

component.scss

.my-component__container{//在这里覆盖材质样式.mat-form-field{...}}

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

:host/deep/.mat-form-field {文本对齐:左！重要；}

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

:host {.my-component__container{}}

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.

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.

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

解决方案

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)

Note: ViewEncapsulation is none here.

component.html

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

component.scss

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

Solution 2: use /deep/.(deprecated)

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

Solution 3: don't change ViewEncapsulation , then:

:host {
  .my-component__container{}
}

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