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

Question

我面临一个问题。 当用户将 select 切换按钮使用 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 。 右视图应如下所示。

我需要如上图所示的 angular 材料切换按钮应该可见。 请帮我解决这个问题。

Answer 1

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