How to override the angular-material theme

Question

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

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

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

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

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

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.

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

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

Answer 1

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

• Theming your Angular Material app
• Theming your custom component with Angular Material's theming system

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:

• Creating custom color palettes based on hex color codes
• Creating multiple themes and apply them to different components
• Theming components based on parent class