Angular 16：我如何改变Angular Material复选框（MDC）的大小？

Question

在现在被认为是遗留的 Material 中，我可以按照以下方式设置复选框的大小：

.mat-checkbox-frame {
  width: 1.5rem;
}

我如何在 MDC 中实现相同的效果？

Answer 1

要更改复选框的大小，请在styles.scss中添加以下CSS代码：

.mdc-checkbox__background {
  width: 1.5rem !important;
  height: 1.5rem !important;
}

但是，如果您想使用默认的涟漪效果，这只是解决方案的一半。现在您还需要对齐复选框，使其完美地适应涟漪效果的圆圈中。请在styles.scss中添加以下CSS代码：

.mdc-checkbox__background {
  width: 1.5rem !important;
  height: 1.5rem !important;
  top: 50% !important; /* 添加 */
  left: 50% !important; /* 添加 */
  transform: translate(-50%, -50%) !important; /* 添加 */
}

请参考实时演示。