如何覆盖 angular-material 主题 [英] How to override the angular-material theme

问题描述

覆盖 angular-material 主题的最佳方法是什么...?

What is the best way to override the angular-material theme...?

覆盖 angular-material 类是否是一个好习惯，例如:

Is it a good practice to override the angular-material classes, for example:

.mat-form-field-infix {
    background-color : #000fff;
}

或通过为 Angular-material 元素创建自己的 css 类..?

or By creating own css classes for the Angular-material elements..?

通过创建自己的 css 类，我在选择 angular-material 元素中的内部子元素时遇到了问题.

By creating the own css classes, I'm facing the problem while selecting the inner child elements in the angular-material element.

这里我创建了一个名为form-filter-select-wrapper"的自定义类，但我想使用类mat-form-field-infix"更改元素的样式，该类是form-filter-select-wrapper"类.

Here I have created a custom class called "form-filter-select-wrapper", but I want to change the styling for the element with the class "mat-form-field-infix", which is parent element to the "form-filter-select-wrapper" class.

如何自定义此类mat-form-field-infix"的属性.我无法从组件级别处理.

How can I customize the properties for this class "mat-form-field-infix". Which I can not handle from the component level.

请告诉我覆盖 Angular 材质元素的最佳方法.

Please advice me the best way to override the Angular-material elements.

推荐答案

在我看来，覆盖材质主题的最佳方式是创建自定义主题，如官方文档所述:

In my view, the best way to override a material theme is by creating a custom theme, as explained on the official documentation:

• 为您的 Angular Material 应用设置主题
• 使用 Angular Material 的主题系统为您的自定义组件设置主题

基础是为整个应用程序创建自定义主题，使用默认的角度调色板/颜色(此处提供)，决定浅色或深色主题并让它应用于整个应用.

The basics is to create a custom theme for the entire app, using default angular palettes/colors (available here), deciding between light or dark theme and letting it apply to the entire app.

不过，您可以走得更远，例如:

Still, you may go much further, for example:

• 基于十六进制颜色代码创建自定义调色板
• 创建多个主题并将它们应用于不同的组件
• 基于父类的主题组件

这篇关于如何覆盖 angular-material 主题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！