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; /* 添加 */
}

請參考即時示範。