禁用样式(mat-expansion-panel)

Question

如何在禁用时隐藏此mat-expansion-panel背景？

我已经添加了这个css

::ng-deep .mat-expansion-panel-header[aria-disabled=true] {
border-radius: 10px;
background-color: rgba(0,0,0,.26) !important;
color: rgb(107, 190, 198) !important;}

但现在轮到this了

我还尝试从浏览器中检查元素并找到一个类

.mat-expansion-panel {
background: #fff;
color: rgba(0,0,0,.87);}

当我尝试取消选中“背景”的时候，白色的背景消失了，但我不知道我必须在css中做什么

Answer 1

背景是由.mat-expansion-panel-header的父级mat-expansion-panel添加的。因此，您希望根据子级的属性( aria-disabled )更改父级样式。

这在css中是不可能的。

您可能要做的是将.mat-expansion-panel (父)背景色设置为默认的透明。所以覆盖初始值。并将background-color:#fff添加到panel-header中。然后在它被禁用时覆盖它。

::ng-deep .mat-expansion-panel{
    background: transparent;
    color: rgba(0,0,0,0); /* transparent */
}
::ng-deep .mat-expansion-panel-header{
    /* styles that were added to panel before */
    background: #fff;
    color: rgba(0,0,0,.87); 
}


::ng-deep .mat-expansion-panel-header[aria-disabled=true] {
    /* change what you want */
    border-radius: 10px;
    background: rgba(0,0,0,.26);
    color: rgb(107, 190, 198);
}