Angular 16 : Comment modifier la taille d'une case à cocher Angular Material (MDC) ?

Question

Dans Material, qui est désormais considéré comme hérité, je peux définir la taille de la case à cocher comme suit :

.mat-checkbox-frame {
  largeur : 1,5 rem ;
}
Comment puis-je obtenir le même effet dans MDC ? 

Answer 1

Pour modifier la taille de la case à cocher, ajoutez le code CSS suivant dans styles.scss :

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

Mais si vous souhaitez utiliser l'effet d'entraînement par défaut, ce n'est que la moitié de la solution. Maintenant, vous devez également aligner la case à cocher pour qu'elle s'insère parfaitement dans le cercle de l'effet d'entraînement. Veuillez ajouter le code CSS suivant dans styles.scss : 

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

Veuillez vous référer à la démo en direct.