<mat-form-field
class="height-4em"
appearance="outline"
>
<mat-label>Favorite food</mat-label>
<input matInput placeholder="Ex. Pizza" value="Sushi">
</mat-form-field>
.mat-form-field-infix{
display: block;
position: relative;
flex: auto;
padding: 0;
border-top: 0px solid transparent !important;
}
mat-form-field{
margin-bottom: -1.25em
}
::ng-deep .my-form-field .mat-mdc-form-field-bottom-align {
display: none !important;
}
<mat-menu #menu="matMenu">
<ng-container *ngIf="currentPage === 1">
<mat-form-field class="my-form-field" style="padding:10px;">
<input matInput>
</mat-form-field>
</ng-container>
</mat-menu>
我在使用mat-fab
按钮与mat-spinner
一起时遇到了类似的问题。每当spinner被“激活”时,周围的元素都会向下移动。问题出在.mat-fab .mat-button-wrapper
上,它来自于渲染后嵌入的包装span
元素中的mat-spinner
。
解决方法:
::ng-deep .mat-fab .mat-button-wrapper {
padding: 0;
vertical-align: middle;
}
问题已解决。不需要vertical-align
,但在mat-fab
按钮中很好地对齐了旋转器。
$typography: mat-typography-config(
$input: mat-typography-level(14px, 1.125, 400),
);
@include mat-core($typography);
::ng-deep .mat-mdc-form-field-subscript-wrapper {
height: 0;
}