html - 禁用样式(垫扩展面板)

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 添加，它是 .mat-expansion-panel-header 的父级。因此，您想根据子项的属性 (aria-disabled) 更改父项样式。

这是 css 做不到的。

您可能要做的是将 .mat-expansion-panel(parent)背景颜色设置为默认透明。所以覆盖初始值。并将 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);
}