css - 如何更改 mat-button-toggle 的边界半径

Question

我有 mat-button-toggle 并且想将 border-radius 更改为 20px，但它仍然是 4px。

我做错了什么？

<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

使用:host和 .mat-button-toggle-group

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

See working code