Me enfrento a un problema. Necesito cambiar el color de fondo y su color de fuente cuando el usuario seleccione el botón de alternar usando material Angular. Estoy explicando mi código a continuación.

 <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>

El código css se proporciona a continuación.

 :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; }

Según mi código, la vista se ve a continuación.

Cuando estoy seleccionando cualquier botón, se ve como a continuación.

Si vemos la vista anterior, entonces una parte del fondo no está rellena con el color y también con el color del texto que necesito cambiar a white después de la selección. La vista derecha debería parecerse a la siguiente.

Necesito como en la imagen de arriba, el botón de alternancia de material angular debería estar visible. Por favor, ayúdame a resolver este problema.