如何更改 Angular Material 17 中 MatButtonToggleGroup 的边框半径

Question

是否可以覆盖MatButtonToggleGroup的默认样式？ 如何更改 MatButtonToggleGroup 的边框半径和背景颜色？

Answer 1

您可以覆盖它的变量，例如在主 styles.scss 文件中。

要更改

border-radius

，有变量

--mat-standard-button-toggle-shape

，因此只需设置

--mat-standard-button-toggle-shape: 1px;

即可。

要更改未选定的

background-color

的

mat-button-toggle

，有变量

--mat-standard-button-toggle-background-color

，对于选定的

mat-button-toggle

，有变量

--mat-standard-button-toggle-selected-state-background-color

。

示例：