Angular mat-button: цвет фона при наведении работает, если я использую цвет, отличный от белого - PullRequest
Новая
       26

Angular mat-button: цвет фона при наведении работает, если я использую цвет, отличный от белого

1 голос
/ 23 марта 2020

Попытка установить собственный цвет фона для состояния :hover на моем Angular mat-button

Вот html: <button mat-button class="my-mat-button">Click</button>

Тогда мой css в моем styles.sass

.my-mat-button:hover
  background-color: red !important

Это работает, чтобы изменить состояние наведения на красный.

Но когда я изменяю css на 

.my-mat-button:hover
  background-color: white !important

В результате состояние наведения становится серым.

1 Ответ

2 голосов
/ 24 марта 2020

Цвет фона кнопок работает, как и ожидалось, и ваш код верен.
Я перестроил вашу проблему в stackblitz . Если вы посмотрите на кнопки «warn», вы увидите, что цвет фона работает.

Мне кажется, проблема в том, что при наведении меняется непрозрачность кнопки. Я искал в angular коде материала и нашел это: 

// Only basic and stroked buttons (not raised, FABs or icon buttons) have a hover 
style.
// Use the same visual treatment for hover as for focus.
.mat-button:hover,
.mat-stroked-button:hover {
  .mat-button-focus-overlay {
    opacity: 0.04;
  }
}

Итак, ваша кнопка начинает светиться белым цветом, но затем исчезает. Вы можете увидеть это и в примере. Вы можете посмотреть оригинальную таблицу стилей здесь .

...