Angular Material - la taille de la police de l'étiquette du bouton radio est trop grande

Question

Comme vous pouvez le voir sur cette image, la taille de la police pour l'élément mat-radio L'étiquette est très éloignée de la taille de la police pour tout le reste.

Il s'agit de la partie pertinente du modèle :

<mat-radio-group formControlName="choice">
    <div class="col-auto">
        <mat-radio-button value="1">Ogni secondo</mat-radio-button>
    </div>
    <div class="w-100"></div>
    <div class="col-auto">
        <mat-radio-button value="2">Ogni</mat-radio-button>
        <mat-form-field>
           <mat-select formControlName="every">
              <mat-option *ngFor="let i of seconds" [value]="i + 1">
                 {{ i + 1 }}
              </mat-option>
           </mat-select>
        </mat-form-field>
        secondo/i partendo dal secondo
    ...

J'ai essayé via la typographie personnalisée, en utilisant leurs mixins et fonctions SASS, décrits dans la section de la doc sur la typographie. Déjà essayé, cela signifie que j'ai essayé d'injecter une typographie personnalisée dans le fichier mat-core l'importation, conformément à https://material.angular.io/guide/typography

Une idée ?

Editer : définir une taille de police personnalisée pour la classe .mat-radio-label-content produit ce résultat :

Answer 1

Vous devez modifier la taille de la police dans le fichier css de l'article lui-même. Vous ne pouvez pas la remplacer par une css écrite dans votre propre fichier css.

Answer 2

::ng-deep .mat-radio-outer-circle {
    height: 15px !important;
    width: 15px !important;
    top: 3px !important;
    border-width: 1px !important;
}
::ng-deep .mat-radio-inner-circle{
    height: 15px !important;
    width: 15px !important;
    top: 3px !important;
}

Vous pouvez définir la hauteur, la largeur et le haut des cercles extérieurs et intérieurs d'un bouton radio. Cela fonctionne pour moi

Answer 3

Vous devez avoir inclus un thème par défaut pour Angular Material et, par conséquent, il reprend la hauteur par défaut de l'étiquette radio.

"mat-radio-label-content" => Il s'agit du nom de la classe de l'élément que vous pouvez cibler pour définir la taille de la police.

S'il ne le permet pas de manière native, utilisez :ng-deep.