How and Best Practices for Globally Customizing Angular Material UI Appearance?

I am using Angular 16 with Angular Material UI components in my project, and I want to apply custom styles like rounded corners, double-bordered inputs, custom fonts, etc. I have achieved this by overriding the Material CSS classes using !important, but I am unsure if this is the best practice.

Here's an example of how I am overriding the CSS classes:

.mat-form-field {
border-radius: 8px !important;
border: 2px solid #000 !important;
}


I have a few questions:

1. 
   Is overriding Material UI classes using !important recommended? Could this lead to potential issues like breaking styles in future updates or causing unexpected behavior?
   
   
2. 
   Using Mixins: I've come across suggestions to use mixins instead of !important to apply custom styles. Where can I find the appropriate Angular Material mixins for this, and could you provide an example of how to use them to avoid these issues?
   
   
3. 
   Any guidance on best practices for globally customizing Angular Material components would be greatly appreciated. Thanks!
   

Continue reading...