Comment modifier le rayon de la bordure du bouton-toggle ?

Question

J'ai un mat-button-toggle et je veux changer l'élément border-radius a 20px mais c'est quand même 4px .

Qu'est-ce que je fais de mal ?

<mat-button-toggle-group class="ruleActionOnOffButton" name="fontStyle" aria-label="Font Style" *ngIf="modules.type === action.type && modules.id === action.id" value="{{action.action}}">
  <mat-button-toggle value="1" (change)="selectionChanged($event,i)">An</mat-button-toggle>
  <mat-button-toggle value="2" (change)="selectionChanged($event,i)">Aus</mat-button-toggle>
  <mat-button-toggle value="3" (change)="selectionChanged($event,i)">Toggle</mat-button-toggle>
</mat-button-toggle-group>

Css

/deep/ .mat-button-toggle-group-appearance-standard, .mat-button-toggle-standalone.mat-button-toggle-appearance-standard{
        border-radius: 20px !important;
    }

    .ruleActionOnOffButton .mat-button-toggle-appearance-standard .mat-button-toggle-label-content{
        border-radius: 20px !important;

    }

Answer 1

Utilice :host y .mat-button-toggle-group

:host .mat-button-toggle-group{
    border-radius: 20px !important;
}

Voir le code de fonctionnement

Answer 2

Si vous souhaitez modifier l'apparence de la bordure d'un seul bouton de basculement, vous pouvez le faire dans la section styles.scss :

// This will adjust the hover background of the toggle button to look like a material button:
.mat-button-toggle.mat-button-toggle-appearance-standard:hover { 
border-radius: 4px !important; }

// And this will keep the background when the button is pressed:
.mat-button-toggle-checked.mat-button-toggle-appearance-standard {
border-radius: 4px !important; }

Note complémentaire : j'ai remarqué que l'animation, lorsque le bouton est cliqué, est toujours rectangulaire. Je pense que c'est également ajustable, mais vous ne le verrez que si vous zoomez.