角度材质 - 将垫复选框向左对齐

Question

我正在尝试将

<mat-checkbox>

与其容器的左侧对齐。默认情况下它是缩进的。我尝试设置负左边距，它有效，但突出显示的圆圈被裁剪了。

我想知道这个问题是否有解决方案。这是我到目前为止的代码：

properties.dialog.html：

<div class="form-field" *ngIf="control.type == 'TextInput'">
    <div class="label">{{ control.label }}</div>
    <mat-form-field>
        <input type="text" matInput [formControlName]="control.propertyName">
    </mat-form-field>
</div>

<ng-container *ngIf="control.type == 'CheckboxInput'">
    <mat-checkbox [formControlName]="control.propertyName">{{ control.label }}</mat-checkbox>
</ng-container>

properties.dialog.scss：

mat-checkbox {
    margin-left: -11px;
}

Answer 1

Material Tab 组件负责裁剪。设置几个样式就可以解决

::ng-deep .mat-mdc-tab-body-wrapper {
    overflow: visible !important;
}
::ng-deep mat-tab-body {
    overflow: visible !important;
}
::ng-deep .mat-mdc-tab-body-content {
    overflow: visible !important;
}