如何在Angular Material 17中修改MatButtonToggleGroup的边框圆角及样式？

参考效果示意图：

1. 是否可以覆盖MatButtonToggleGroup的默认样式？ #

完全可以。Angular Material组件的样式并非固定不可修改，你可以通过深度选择器（Angular 17中推荐使用:host ::ng-deep）精准定位组件内部元素，覆盖默认CSS规则，同时避免样式污染全局。也可通过设置组件的encapsulation: ViewEncapsulation.None关闭样式隔离，但这种方式易影响全局样式，不推荐优先使用。

2. 如何修改MatButtonToggleGroup的边框圆角？ #

在组件的CSS/SCSS文件中添加以下样式：

/* 修改整个按钮组的边框圆角 */
:host ::ng-deep .mat-button-toggle-group {
  border-radius: 16px; /* 替换为你需要的圆角大小 */
}

/* 修正选中状态下首尾按钮的圆角，避免与组的圆角冲突 */
:host ::ng-deep .mat-button-toggle-group .mat-button-toggle:first-child.mat-button-toggle-checked {
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
}

:host ::ng-deep .mat-button-toggle-group .mat-button-toggle:last-child.mat-button-toggle-checked {
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;
}

3. 如何修改MatButtonToggleGroup的背景色？ #

分两种场景设置：

未选中状态的背景色 #

/* 设置按钮组的背景色 */
:host ::ng-deep .mat-button-toggle-group {
  background-color: #f5f5f5; /* 替换为你需要的背景色 */
}

/* 让未选中的按钮继承组的背景色 */
:host ::ng-deep .mat-button-toggle:not(.mat-button-toggle-checked) {
  background-color: inherit;
}

选中状态的背景色 #

/* 设置选中按钮的背景色 */
:host ::ng-deep .mat-button-toggle-checked {
  background-color: #bbdefb; /* 替换为你需要的选中态背景色 */
}

内容的提问来源于stack exchange，提问作者Tawani