css - 如何使用自定义主题更改 mat-button 中的文本颜色

Question

在使用这个document .在尝试更改 mat-button 中的文本颜色时，我添加了一个 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 之间的范围来获得白色前景。

您可以引用以下链接以获取 Material 设计调色板的引用。 https://material.io/design/color/the-color-system.html#tools-for-picking-colors

如果您想使用相同的颜色 (A400) 和白色前景，您可以使用自己的样式来实现。

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