你能改变 Angular mat-expansion-panel 文本/字体颜色吗？答案

【问题标题】：Can you change Angular mat-expansion-panel text/font colors?你能改变 Angular mat-expansion-panel 文本/字体颜色吗？
【发布时间】：2019-10-07 04:45:10
【问题描述】：

我无法更改 mat-expansion-panel 中的文本颜色？

我有一个带有垫子扩展面板的应用程序。我可以使用 .mat-expansion-panel-header 更改背景颜色等，但我所做的一切似乎都不会影响标题的文本颜色。尝试从默认颜色的白色背景黑色文本变为深蓝色背景（我可以这样做）和白色文本（我不能）。

我尝试了各种选项，包括 -label、-text 和 -typography 等，但没有任何变化。

/deep/ .mat-expansion-panel-header-label,
.mat-expansion-panel-header-label.mat-expanded,
.mat-expansion-panel-header-label.mat-expanded:hover {
  background: white;  

}

如上所示，我已经尝试了许多版本，但一无所获。基本的期望是文本变成白色而不是黑色。

【问题讨论】：

您在哪个 css/scss 文件中定位这些类？样式是有范围的，因此您的目标可能是组件之外的类。
我正在使用 app.component.scss 文件。我试图找出这种情况，它不能在那里改变，但没有找到任何东西..
如果我是你，我会在我的主 scss 文件中更改它，看看是否能解决问题。如果是这样，这是一个范围界定问题，然后您可以决定如何处理它。如果不是，那么您更有可能错误地定位类。
我看过主要的，它不是指标签，它指的是排版，这让我觉得你可能是对的。

标签： angular

【解决方案1】：

如果您使用的是最新版本的 Angular Material (7)，那么这应该可以解决问题：

.mat-expansion-panel-header-title {
  color: red
}

也可以在这里查看堆栈闪电战：https://stackblitz.com/edit/angular-cnasgn

【讨论】：