更改背景的 Angular Mat-Toggle答案

【问题标题】：Angular Mat-Toggle with changed background更改背景的 Angular Mat-Toggle
【发布时间】：2020-06-22 07:56:43
【问题描述】：

我在legacy 模式下使用了 Mat-Toggle 按钮。我更改了焦点模式的背景颜色。这很好用。

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

如何正确设置背景？

Stackblitz中提供的示例代码

【问题讨论】：

标签： angular angular-material

【解决方案1】：

当用鼠标点击时：

使用键盘选项卡时（现在按预期显示背景颜色）：

请在stackblitz找到我的解决方案

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-focused 状态时更改按钮的颜色。

我已经包含了 * 选择器，它有一个覆盖以减轻背景颜色的变化。尝试更改 cdk-focus 颜色时，mat-button-toggle 似乎存在错误。

我将尝试进一步挖掘以了解为什么会发生这种情况。

我希望这会有所帮助。

【讨论】：

原则上它可以工作 - 尽管整个 Material Theme 自定义听起来像一座神秘的云山。 @extend 是我以前从未读过的东西。 cdk-focused 似乎仅需要它。它也适用于standard 外观（正如人们所期望的那样）。多谢。我仍然不清楚这是错误还是功能。
嗨@LeO，'@extend'只是在SCSS中扩展另一个类的一种方式，你不必使用它，你可以在类中编写样式。 sass-lang.com/documentation/at-rules/extend#example-1-scss我很高兴能帮上忙。

【解决方案2】：

显然有一个元素导致了这个类 mat-button-toggle-focus-overlay.

此元素位于每个切换按钮内，并产生背景白色叠加层以显示在背景前面。

您可以将此类不透明度设置为0 !important，但是使用键盘切换按钮时的视觉焦点将失败。

当相关按钮为(click) 时，您可以通过编程将其设置为0 !important，然后在另一个按钮为(click) 时将其删除。

【讨论】：