Angular Material 15: How to resize focused components such as autocomplete or datepicker?

Question

i updated to material 15, i want ask how i can change height, or overall size of focused component such as autocomplete or datepicker,

https://m2.material.io/design/layout/applying-density.html#usage ,

this page is telling me i can't use density on such components so what is the other way of making my components smaller?

before this i used material 12 and all i had to do was change font-size on .mat-form-field-wrapper class, and this no longer works,

thanks

example of a problem

i was looking for similar problems but solutions are outdated or simply they used density on inputs which does not work on components like autocomplete

Answer 1

What if you take a look at the source and just check the elements under the wrapper and change them with "::ng-deep" ?

I did this for some of my material compounds like :

::ng-deep .mat-form-field-wrapper {
        height: 83%;
        ::ng-deep .mat-form-field-flex{
            background-color: transparent !important;
        }
    }