mat-expansion-panel-header 折叠时的背景色答案

【问题标题】：mat-expansion-panel-header background-color on collapsemat-expansion-panel-header 折叠时的背景色
【发布时间】：2019-07-12 15:09:01
【问题描述】：

我有一些垫子扩展板。标题应具有指定的颜色。好的等等..但是当我展开面板时，颜色变回根颜色...

我该如何改变这个？

<mat-expansion-panel>
  <mat-expansion-panel-header [expandedHeight]="'50px'"  [collapsedHeight]="'50px'" id="test1">

    <mat-panel-title>
        <div class="matPanelSceneSymbol"><i class="material-icons md-36 md-light active">weekend</i></div>

        <div class="matPanelSceneText"> Testszene</div>
    </mat-panel-title>
    <mat-panel-description>
      <div class="matPanelSceneText">Szenenbeschreibung</div>
    </mat-panel-description>

  </mat-expansion-panel-header>

..... ....

css

/deep/ .mat-expansion-panel-header{
    padding-left: 0px !important;
    padding-top: 1px !important;
//  background-color: #0070c040  !important;
    padding-bottom: 1px !important;
}

/deep/ .mat-expansion-panel-header .mat-expanded{
    background-color: none;
}

#test1{
    background-color:  #0070c040  !important;
}

#test2{
    background-color:  #8e0fbc40  !important;
}

【问题讨论】：

请尝试：.mat-expansion-panel-content, .mat-expansion-panel { 背景：#7acc60; }
不..这将为我的洞内容着色。我只是标题

标签： html css angular

【解决方案1】：

此问题已回复here。

您也只需要为展开状态添加 css：

.mat-expansion-panel-header.mat-expanded,
.mat-expansion-panel-header.mat-expanded:hover {
  background: #0070c040;
}

需要对悬停和展开进行一些调整，但这应该会让其他发现此问题的人开始。

【讨论】：

当页眉折叠时，我的 mat-header 显示为白色的根色。请为此提供任何解决方案
您应该发布一个显示您的代码的新问题。

【解决方案2】：

将encapsulation: ViewEncapsulation.None 添加到@Component

@Component({
  selector: '...',
  templateUrl: '...',
  styleUrls: ['...'],
  encapsulation: ViewEncapsulation.None
})

那么 CSS 就可以正常工作了

.mat-expansion-panel-header.mat-expanded,
.mat-expansion-panel-header.mat-expanded:hover {
  background: red;
}

工作于 @angular/material 版本 +10

【讨论】：

使用None ViewEncapsulation是非常错误的，会影响整个应用的样式
@SachithRukshan 我们还能做些什么其他的解决方案？
最好的解决方案是在像 style.scss 这样的全局样式表中添加这些样式，同时选择一个特定的类。另一种解决方案是使用 ng-deep，但使用它时需要非常小心，因为它会产生一些后果。