Question

我的代码很简单

<mat-checkbox
  [(ngModel)]="checked"
  [color]="'primary'"
></mat-checkbox>

如何使此材料复选框变圆？我已经尝试在几乎所有由Angular生成的标签上在此元素下设置样式border-radius: 50%，但是我所获得的最大收获是在矩形内的圆形“选定”外观。

我确信有更好的方法。我找到了this answer about reusing the graphics of a radio-button，但无法适应我的情况（甚至不知道从哪里开始）

Answer 1

该解决方案是根据Prashant Pimpale发表的评论创建的，因为他本人未创建答案。在撰写本文时，Stackblitz已更新为最新版本的库。

HTML

<mat-checkbox color="primary">Regular checkbox</mat-checkbox>
<mat-checkbox class="custom-frame">Circular checkbox</mat-checkbox>

SCSS

::ng-deep .custom-frame {
  & .mat-checkbox-background, .mat-checkbox-frame {
    border-radius: 70% !important;
  }
}