Как изменить цвет текста в кнопке с помощью пользовательской темы

Question

При использовании этого документа .При попытке изменить цвет текста с помощью кнопки mat я добавил theme.scss в проект css.Вот код theme.scss:

@import '~@angular/material/theming';
@include mat-core();

$candy-app-primary: mat-palette($mat-indigo, 700, 300, 900);
$candy-app-accent:  mat-palette($mat-light-blue, A400);
$candy-app-warn:    mat-palette($mat-deep-orange, A200);

$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, 
$candy-app-warn);

@include angular-material-theme($candy-app-theme);

Это HTML-файл:

 <button  mat-raised-button color="accent" routerLink="/">Home</button>

Цвет акцента показывает ожидаемый акцент, матово-голубой, цвет.Текст внутри кнопки по-прежнему серый.A400 не отображает белый цвет, как ожидалось.

Answer 1

Показывается так же, как и ожидалось.(mat-light-blue, A400) будет иметь черный цвет как основной цвет.Я предлагаю вам использовать диапазон от 700 до 900 для получения белого цвета в качестве переднего плана.

Вы можете обратиться к ссылке ниже для справки по цветовой гамме дизайна материала.https://material.io/design/color/the-color-system.html#tools-for-picking-colors

И если вы хотите использовать тот же цвет (A400) с белым передним планом, вы можете сделать это с вашим собственным стилем.

.mat-raised-button{
   color: white !important;
 }

Answer 2

попробуйте

button
{
    color: $(code);
}