如何在 Angular 材质切换按钮中更改选择时的背景颜色和字体颜色答案

【问题标题】：How to change background color and font color on selection in mAngular material toggle button如何在 Angular 材质切换按钮中更改选择时的背景颜色和字体颜色
【发布时间】：2022-02-14 14:49:57
【问题描述】：

我面临一个问题。当用户使用 Angular 材质选择切换按钮时，我需要更改背景颜色及其字体颜色。我在下面解释我的代码。

 <div class="btn-group">
            <mat-button-toggle-group #group="matButtonToggleGroup" [value]="selectedVal" (change)="onValChange(group.value)" color="primary">
              <mat-button-toggle value="option1" style="border-right: none;width:127px">
                Option 1
              </mat-button-toggle>
              <mat-button-toggle value="option2" style="border-right: none;width:127px">
                Option 2
              </mat-button-toggle>
            </mat-button-toggle-group>
          </div>

css代码如下。

:host .mat-button-toggle-group{
    border-radius: 20px !important;
    height: 40px !important;
    align-items: center !important;
    margin-top: 5px !important;
    padding: 0 5px !important;
    z-index: 3 !important;
    color: #017cad !important;
}
:host .mat-button-toggle-checked {
    background-color: #017cad !important;
    color: #f5f5f6;
}

根据我的代码，视图如下所示。

当我选择任何一个按钮时，它如下所示。

如果我们看到上面的视图，那么背景的某些部分没有填充颜色，并且选择后我需要将文本颜色更改为white。右视图应如下所示。

我需要像上图一样的角度材质切换按钮应该可见。请帮我解决这个问题。

【问题讨论】：

标签： javascript css angular angular-material

【解决方案1】：

我建议使用主题。使用材质主题，您可以从主题中提取所需的任何单个调色板，并将背景默认对比度颜色应用于文本颜色，以实现与浅色或深色的最佳对比度。 https://stackoverflow.com/a/48159346/15439733

【讨论】：