Я создал собственную тему и использую ее в своем файле Styles.scss следующим образом:
.alternate-theme-green {
@include mat.button-color(m3-green-theme.$light-theme, $color-variant: primary);
}
это отлично работает для матовой плоской кнопки, но при применении того же класса к матовой поднятой кнопке он не работает.
Пожалуйста помоги.
🤔 А знаете ли вы, что...
С помощью Angular можно создавать плагины и расширения для других приложений.
Вы можете попробовать вот так:
.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;
}
Попробуйте это в своем файле 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;
}