如何移除Material Checkbox的外部圆圈？

要移除mat-checkbox的外部圆圈，你当前隐藏的是涟漪效果容器（.mdc-checkbox__ripple），这并不是目标元素。真正对应外部圆圈的是.mdc-checkbox__outer-circle，同时要注意Angular的组件样式封装特性，直接写样式可能无法穿透到组件内部，解决方法如下：

方法一：组件内使用样式穿透 #

在组件的CSS/SCSS文件中添加：

::ng-deep .mdc-checkbox__outer-circle {
  display: none;
}

方法二：写入全局样式文件 #

把样式放到项目根目录的全局样式文件（比如styles.scss）里，无需穿透：

.mdc-checkbox__outer-circle {
  display: none;
}

如果需要只保留勾选图标、隐藏内部填充圆圈，还可以补充：

/* 隐藏内部填充圆圈 */
::ng-deep .mdc-checkbox__inner-circle {
  display: none;
}
/* 自定义勾选图标的颜色 */
::ng-deep .mdc-checkbox__checkmark {
  color: #1976d2; /* 示例使用primary主题色值 */
}

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