如何改变一个垫子展开面板的图标/切换颜色?

Question

我已经试过使用:

.mat-expansion-panel-header{
color: #fff;
}
.mat-expansion-panel-header::after{
color: #fff;
}
.mat-expansion-panel{
color: #fff;
}
.mat-expansion-panel::after{
color: #fff;
}
.mat-focus-indicator{
color: #fff;
}
.mat-expansion-indicator{
color: #fff;
}
.mat-expansion-indicator::after{
color: #fff;
}

的例子我也试过放置一个自定义类，也把样式直接放在元素上，我不能让它采取我想要使用的颜色。帮帮我:

Answer 1

试试这个:

.mat-expansion-panel .mat-icon {
fill:#fff;
}

为什么?这个图标是一个SVG，所以要改变它的颜色，需要使用"填充"。CSS属性。

Answer 2

使用&;fill&;对我来说不起作用。我一直在挖掘，似乎Angular Material强迫你使用，我删除了它，因为我真的不需要它。

但是要访问"指示器"属性，此框架必须严格遵循:

<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>
This is the expansion title
</mat-panel-title>
<mat-panel-description>
This is a summary of the content
</mat-panel-description>
</mat-expansion-panel-header>
<p>This is the primary content of the panel.</p>
</mat-expansion-panel>

只需将我在Ionic项目中缺少的空标记添加到"global.scss"我在文件中添加了以下几行:

.mat-expansion-panel-header-description,
.mat-expansion-indicator::after {
color: #fff;
}