Angular 改变背景的角垫切换

我在传统模式中使用了Mat切换按钮。我更改焦点模式的背景色。这个很好用

但当我通过键盘将选择更改回初始聚焦按钮时，scss文件的背景色将不再应用。mat-button-toggle-checked.cdk-focused

如何正确设置背景

---

在

中提供的示例代码中，显然有一个元素导致了类的这种情况 mat按钮切换焦点覆盖

此元素位于每个切换按钮内，并生成背景白色的覆盖，以显示在背景前面

您可以将该类不透明度设置为0！重要信息，但使用键盘切换按钮时的视觉焦点将失败

---

您可以将其设置为0！重要信息：单击相关按钮时以编程方式进行，然后单击另一个按钮时将其删除。

用鼠标单击时： 当使用键盘的选项卡现在以预期的背景色显示时：

请在屏幕上找到我的解决方案 button-toggle-exclusive-example.scss

.example-selected-value {
  margin: 15px 0;
}

@import '~@angular/material/theming';

@include mat-core();

$app-primary: mat-palette($mat-indigo);
$app-purple: mat-palette($mat-teal);
$app-theme: mat-light-theme($app-primary, $app-purple);

$config: mat-typography-config();
@mixin mix-app-theme($app-theme) {
  .mat-button-toggle-checked {
    background-color: mat-color($app-purple, 400);
     @extend .text-color;
  }
  .mat-button-toggle-checked.cdk-focused { 
  background-color: mat-color($app-purple, 600);
    @extend .text-color;
  }
  .mat-button-toggle-checked.mat-button-toggle-disabled {
    background-color: mat-color($app-purple, 200);
    color: mat-color($app-purple, default-contrast);
  }
}

.text-color {
  * {
    color: rgb(255, 255, 255);
  }

  color: rgba(255, 255, 255, 0.25);
}

// Include the mixin
@include mix-app-theme($app-theme);

我稍微修改了您的代码，添加了一个新类，以便在按钮处于cdk聚焦状态时更改其颜色

我已经包括了*选择器，它有一个覆盖，可以减轻背景颜色的变化。在尝试更改cdk焦点颜色时，mat按钮切换似乎存在错误

我将尝试进一步挖掘，看看为什么会发生这种情况

---

我希望这能有所帮助。

原则上它是有效的——尽管整个材料主题听起来像一座神秘的云山。@extend是我以前从未读过的东西。似乎我只需要把它用于cdk。正如人们所期望的那样，它也适用于标准外观。非常感谢。我仍然不清楚这是一个bug还是一个特性。嗨@LeO，“@extend”只是在SCSS中扩展另一个类的一种方式，你不必使用它，你可以在类中编写样式。我很高兴能帮上忙。