如何更改垫扩展面板中间的背景颜色（展开时）？

Question

<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>

如何更改 mat-panel-description 区域（并且仅 mat-panel-description 区域使其背景颜色不同（例如红色）？

我尝试了各种样式，但似乎无法更改特定背景的整个背景（同时保持页眉和页脚的原始颜色）。

使用 chrome 开发工具，为以下 .mat-expansion-panel-body 作品添加背景色，例如：

.mat-expansion-panel-body {
  background-color: red;
}

但是当我尝试将其放入我的样式表（或什至通过内联样式）时，这不起作用。

注意：当我将其放入我的全局样式表 (styles.css) 时，这也有效——但我想尽可能避免这样做。

这是一个 screenshot，其中有一个红色圆圈，表示我要为其更改背景颜色的区域。

谢谢

Answer 1

将封装属性添加到您的 @Component 装饰器中

encapsulation: ViewEncapsulation.None

然后您可以简单地在 css 文件中添加样式。

.mat-expansion-panel-body {
    background-color: red;
 }

希望对您有所帮助！！

Answer 2

在 Angular 中使用 /deep/ 更改 material 组件的样式以在不更改封装的情况下使用仿真封装强制样式下降，所以试试这个：

/deep/ .mat-expansion-panel-body {
  background-color: red;
}

或 ::ng-deep 因为 /deep/ 已弃用

::ng-deep .mat-expansion-panel-body {
  background-color: red;
}

Answer 3

我最终使用全局样式解决了这个问题，但使用特定于组件的 class 作为父项（以防止覆盖所有出现的 .mat-expansion-panel-body）

我选择这种方法是因为我不想使用已弃用的 ng-deep 或弄乱我的组件的封装。

扩展-概述-example.component.html

<div class="expansion-overview-example">
  <p>This is the primary content of the panel.</p>
</div>

styles.css

.expansion-overview-example .mat-expansion-panel-body {
    background-color: red;
}

如何更改垫扩展面板中间的背景颜色（展开时）？

How do I change the Background Color of the middle of mat-expansion-panel (when expanded)?

css

angular

angular-material

angular-material2