Mat.button-color не работает для кнопки, поднятой матом
Я создал собственную тему и использую ее в своем файле Styles.scss следующим образом:
.alternate-theme-green {
@include mat.button-color(m3-green-theme.$light-theme, $color-variant: primary);
}
это отлично работает для матовой плоской кнопки, но при применении того же класса к матовой поднятой кнопке он не работает.
Пожалуйста помоги.
@NarenMurali, большое спасибо, но я хочу, чтобы приподнятая кнопка выглядела так же, как и плоская кнопка, но в приподнятой кнопке цвет фона должен быть основным цветом, а не белым.
Ответы 3
Вы можете попробовать вот так:
.mat-raised-button.alternate-theme-green {
@include mat.button-color(m3-green-theme.$light-theme, $color-variant: primary);
}
На самом деле происходит обратный процесс. В случае поднятой кнопки цвет фона становится БЕЛЫМ, но цвет (шрифт) берется из темы. А в случае с плоской кнопкой все наоборот и правильно.
Поскольку вы хотите преобразовать одну кнопку в другую, вам придется использовать CSS с переменными, чтобы определить переопределения для этого конкретного типа кнопки.
.alternate-theme-green {
@include mat.button-color($theme, $color-variant: primary);
}
.alternate-theme-green[mat-raised-button]:not(:disabled) {
color: var(--mdc-filled-button-label-text-color) !important;
background-color: var(--mdc-filled-button-container-color) !important;
}
Демо-версия Stackblitz
Да, сэр, это работает.
Кроме того, можно ли управлять радиусом границ кнопок?
@raju просто добавьте border-radius: 16px !important; к упомянутому дополнительному CSS
Попробуйте это в своем файле Styles.scss.
.custom-raised-button {
background-color: #3f51b5 !important;
color: white !important;
border-radius: 6px !important;
}
.mat-raised-button.custom-raised-button {
background-color: #3f51b5 !important;
color: white !important;
}
проблема не воспроизводится stackblitz Демо