Angular 16: Wie ändere ich die Größe eines Angular Material-Kontrollkästchens (MDC)?

Question

In Material, das jetzt als veraltet gilt, kann ich die Größe des Kontrollkästchens wie folgt festlegen:

.mat-checkbox-frame {
  Breite: 1,5rem;
}

Wie kann ich den gleichen Effekt in MDC erzielen?

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

请参考实时演示。