css - 如何调整 Angular Material 组件的大小

Question

我正在开发 Angular 应用程序，到目前为止我一直在使用 Angular Material 组件。当我开始设计应用程序时，我很快就遇到了设计 Angular Material 组件的问题。我需要使由 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>

这是 Angular Material 下拉列表的最小工作实现: https://stackblitz.com/edit/angular-cuu4pk

当我使用::ng-deep 改变组件的大小时，只有 objective-c ss 类被调整大小，而不是整个组件。

编辑:感谢您到目前为止的回答!可以使用::ng-deep 更改组件的宽度，但即使我更改高度，一般尺寸也会相同。我要找的是类似于 css 的 transform: scale() 的东西。transform 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;
}