mat-button-toggle styling issues

[fad250]

Bug 1:

Issue

Applying custom style for checked button toggle gives an odd hover effect.

eg.

.mat-button-toggle-checked{
  background-color: #2979FF;
  color: white;
} 

What are the steps to reproduce?

https://stackblitz.com/edit/angular-ivjb9g

Bug 2:

Issue

In legacy style, button elevation cannot be modified.

What are the steps to reproduce?

https://stackblitz.com/edit/angular-ivjb9g-tdqden

[wottpal]

Does anybody know a temporary fix? :)

[skobak]

Does anybody know a temporary fix? :)

A bit ugly hack, but works

::ng-deep .mat-button-toggle-appearance-standard:not(.mat-button-toggle-disabled):hover .mat-button-toggle-focus-overlay {
    opacity: 0 !important;
}

[blogcraft]

I find mat-button-toggle the worst component of Angular Material.

[tawani]

I find mat-button-toggle the worst component of Angular Material.

It is as if they literally wanted to make it horrible.

[zzeneg]

For bug 1:
The problem is in color: white, you have to set it on .mat-button-toggle-checked button to avoid it. Unfortunately it works only with ::ng-deep. https://stackblitz.com/edit/angular-ivjb9g-sse7ch
On the other hand such overrides should be a part of your custom material theme, so just put it in your theme.scss:

.mat-button-toggle {
    button {
        color: mat-color($color-primary);
    }
}
.mat-button-toggle-checked {
    background-color: mat-color($color-primary);

    button {
        color: #fff;
    }
}

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}