In the midst of my work on an Angular application, I have been utilizing angular material components. However, as I delved into styling the application, I encountered difficulties in styling the angular material component, particularly in enlarging a dropdown created using mat-select and mat-options.
I am familiar with the solution involving ::ng-deep, but I am unable to pinpoint a specific part of the component that would resize the entire component. I am also open to exploring alternative methods to ::ng-deep if anyone is aware of any.
<mat-form-field>
<mat-select [(value)]="initialValue" [placeholder]="placeholder">
<mat-option class="mat-option" *ngFor="let option of content"
[value]="option">
{{option}}
</mat-option>
</mat-select>
</mat-form-field>
Here is a basic implementation of the angular material dropdown: https://stackblitz.com/edit/angular-cuu4pk
My attempts to use ::ng-deep to adjust the size of the component have only resulted in resizing the targeted css class, not the entire component.
edit: Thank you for the responses thus far! While I can modify the width of the component with ::ng-deep, the overall sizing remains the same even when adjusting the height. I am seeking a solution akin to css's transform: scale(). The challenge with using transform scale() lies in the distortion of the component.