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（）。 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;
}

Answer 2

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

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

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

Answer 3

您必须在下面添加css：

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

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

如何调整角形零件的尺寸

3 个答案: