时间戳

首页 > 解决方案 > 禁用样式（垫扩展面板）

html - 禁用样式（垫扩展面板）

问题描述

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

但轮到这样了

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

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

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

标签： htmlcssangular-material

解决方案

背景是由mat-expansion-panel哪个父级添加的.mat-expansion-panel-header。因此，您想根据子项的属性 ( 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);
}

推荐阅读