如何更改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;

    }

- Michael Mitch

Answer 1

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

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

查看可运行的代码：

点击此处

- לבני מלכה

---

你看到我的例子了吗：https://stackblitz.com/edit/angular-mat-toggle-ne1a4l?file=app/button-toggle-exclusive-example.css 是你所说的吗？ - לבני מלכה

抱歉...我将CSS添加到了全局的CSS中，而不是组件的CSS中...它正在工作！！：）谢谢。 - Michael Mitch

@לבנימלכה 在你的例子中，为什么要使用:host而不是直接使用.ruleActionOnOffButton，后者也可以工作？ - Tomek

mat-button是组件上的宿主DOM，这意味着需要使用:host（也许在以前（Angular版本）这是最好的解决方案）。 - לבני מלכה

Answer 2

如果您想更改单个切换按钮的边框外观，可以在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; }

附带说明：我注意到当按钮被点击时，动画仍然是矩形的。我认为这也是可以调整的，但只有在缩放时才能看到。

- JetMorra