如何在没有额外间距的情况下使用角度材质复选框？

Question

我目前正在使用 Angular Material，想知道是否有办法在没有默认间距的情况下使用复选框。我注意到 Angular Material 的复选框默认被一些间距包围（如图所示）。有没有一种简单的方法可以删除此间距，以便我可以将复选框直接插入到我的内容中而无需额外的间距？

<mat-checkbox formControlName="rememberMe"><span class="remember-me">Remember me</span></mat-checkbox>

padding:0

没有帮助。

这也不起作用：

input[type="checkbox"] {
  width: 10px;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

预先感谢您的协助

Answer 1

我们可以使用下面的CSS

CSS 专注于将填充、高度和宽度删除到所需的大小以及背景的绝对定位！

::ng-deep .custom-checkbox > div > div.mdc-checkbox {
  padding: 0px !important;
}

::ng-deep
  .custom-checkbox
  > div
  > div.mdc-checkbox
  > .mat-mdc-checkbox-touch-target,
::ng-deep
  .custom-checkbox
  > div
  > div.mdc-checkbox
  > .mdc-checkbox__native-control {
  height: 18px !important;
  width: 18px !important;
}

::ng-deep
  .custom-checkbox
  > div
  > div.mdc-checkbox
  > .mdc-checkbox__background {
  top: 0px !important;
  left: 0px !important;
}

Stackblitz 演示