如何调整角度材质组件的大小

Question

我正在开发一个 Angular 应用程序，到目前为止我一直在使用 Angular 材料组件。当我开始设计应用程序时，我很快就遇到了设计角度材料组件的问题。我需要将 mat-select 和 mat-options 制作的下拉菜单做得更大。

我知道使用 ::ng-deep 的解决方案，但我找不到组件的单个部分来调整整个组件的大小。我也很高兴听到 ::ng-deep 的替代方案，如果有人知道的话。

<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>

这是角度材料下拉列表的最小工作实现： https ://stackblitz.com/edit/angular-cuu4pk

当我使用 ::ng-deep 更改组件的大小时，仅调整目标 css 类的大小，而不是整个组件的大小。

编辑： 感谢您迄今为止的回答！可以使用 ::ng-deep 更改组件的宽度，但即使我更改高度，总体尺寸也将相同。我正在寻找类似于CSS的transform:scale()的东西。变换scale（）不起作用的原因是组件的扭曲。

Answer 1

您在“mat-form-field”上添加内联样式或 css 类

<mat-form-field style="width: 400px"> // <---- Add here your style
  <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>

第二个选项将此代码添加到您的 css 中：

mat-form-field{
  width: 400px;
}