How to customize `mat-form-field` - angular-material

Question

I am trying to overwrite mat-form-field styles using ::ng-deep .mat-form-field**. But I read that it would be deprecated soon.
I overrode some styles using ::ng-deep and it partially solves my need. But I also want to use default mat-form-field in some cases.
In my case I decreased height and removed extra padding at bottom for hint as I need to use dense fields in form and having hint padding adds scroll bars.
But I have some dialogs where I can use default mat-form-field and use mat-hint like normal.
I have the below styling in a scss file and I import this file into my component scss using #import
::ng-deep .mat-form-field-flex > .mat-form-field-infix { padding: 0.4em 0px !important;}
::ng-deep .mat-form-field-label-wrapper { top: -1.5em;}
::ng-deep .mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label {
transform: translateY(-1.1em) scale(.75);
}
::ng-deep .mat-form-field-wrapper{
padding-bottom: 0;
}
Can someone suggest a way to be able to use both styles, like extending mat-form-field and customizing it in applying for my dense form and using mat-form-field normally at other places?

Answer 1

I saw that the Material Team uses attributes like dense for the mat-lists. So, you can have a global customization in your styles.scss like:
.mat-form-field[dense] {
.mat-form-field-flex > .mat-form-field-infix {
padding: 0.4em 0px !important;
}
.mat-form-field-label-wrapper {
top: -1.5em;
}
&.mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label {
transform: translateY(-1.1em) scale(.75);
}
.mat-form-field-wrapper{
padding-bottom: 0;
}
}
and just add the attribute to your fields:
<mat-form-field dense ...
This kind of atttibutes can be considered as "component variants", and some CSS methodologies suggest to define a class for it like .mat-form-field-dense but I like the attributes approach better :)
Edit: If you want to include this kind of deep customization in your component, you need to disable the encapsulation including:
#Component({
...
encapsulation: ViewEncapsulation.None
})
that will tell Angular to not mark your Component Styles with an attribute that encapsulates your styles to work only with your component elements, and not interfer with another components sub-elements. Please refer to the Angular Styles official documentation if you want to know how it works ;)