Angular 16：如何修改Angular Material复选框（MDC）的尺寸？

在MDC（Material Design Components）中，你可以通过以下两种方式实现和旧版Material中设置复选框尺寸相同的效果：

方法一：使用MDC内置CSS变量（推荐） #

MDC为组件提供了可自定义的CSS变量，通过修改这些变量能更规范地调整尺寸，且不会破坏组件内部布局逻辑：

.mdc-checkbox {
  --mdc-checkbox-state-layer-size: 2rem; /* 控制复选框点击状态层的尺寸 */
  --mdc-checkbox-icon-size: 1.5rem; /* 控制复选框核心勾选图标的尺寸 */
}

方法二：直接覆盖组件类样式 #

如果需要更精细的样式控制，可以直接针对MDC复选框的核心元素修改尺寸：

/* 调整复选框背景框的尺寸 */
.mdc-checkbox__background {
  width: 1.5rem;
  height: 1.5rem;
}

/* 同步调整勾选图标的尺寸，避免视觉错位 */
.mdc-checkbox__checkmark {
  width: 1.5rem;
  height: 1.5rem;
}

/* 调整点击涟漪效果的尺寸，保证交互区域匹配 */
.mdc-checkbox__ripple::before,
.mdc-checkbox__ripple::after {
  width: 2rem;
  height: 2rem;
  left: calc(50% - 1rem);
  top: calc(50% - 1rem);
}

注意：调整尺寸时建议同步修改相关关联元素（如状态层、勾选图标）的参数，确保复选框的视觉呈现和交互体验一致，避免出现图标错位或点击区域不匹配的问题。

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