如何调整角度材料组件的大小答案

【问题标题】：How to resize angular material components如何调整角度材料组件的大小
【发布时间】：2020-01-12 22:25:58
【问题描述】：

我正在开发一个 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 的转换的东西：scale()。 transform scale() 不起作用的原因是组件的失真。

【问题讨论】：

标签： css angular angular-material

【解决方案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;
}

【讨论】：

【解决方案2】：

你必须在下面添加css：

.mat-form-field {
    width: 100%;
}

因为.mat-form-field 类具有display:inline-block; 属性，所以要设置组件全宽，您必须添加width: 100%;。

【讨论】：

【解决方案3】：

工作代码： https://stackblitz.com/edit/angular-xzyw2w

::ng-deep mat-form-field {
  height: 150px;
  width: 100%
}

//or 
mat-form-field{
  width: 500px;
}

【讨论】：