Angular Material：如何将mat-checkbox左对齐至容器？

默认mat-checkbox的缩进是由内部.mat-checkbox-layout的padding-left: 24px实现的，这个padding是为复选框图标预留位置的。直接给mat-checkbox设置负margin会让组件整体左移，但由于容器可视区域没有扩展，导致高亮圆圈被裁剪。

你可以通过调整组件内部的padding和间距来实现左对齐，同时避免裁剪问题：

修改后的代码 #

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 class="left-aligned-checkbox" [formControlName]="control.propertyName">{{ control.label }}</mat-checkbox>
</ng-container>

properties.dialog.scss

.left-aligned-checkbox {
    .mat-checkbox-layout {
        // 移除默认的左侧padding，实现左对齐
        padding-left: 0;
    }

    .mat-checkbox-inner-container {
        // 维持复选框与文字之间的默认间距，避免文字贴得太近
        margin-right: 8px;
    }
}

补充说明 #

如果你的项目启用了视图封装（默认开启），需要确保样式能穿透到mat-checkbox的内部组件。如果上述样式不生效，可以添加:host ::ng-deep来穿透：

:host ::ng-deep .left-aligned-checkbox {
    .mat-checkbox-layout {
        padding-left: 0;
    }

    .mat-checkbox-inner-container {
        margin-right: 8px;
    }
}

内容的提问来源于stack exchange，提问作者Martin Staufcik