垫子展开面板禁用样式

时间:2019-04-01 10:42:55

标签: css angular-material

如何禁用此扩展垫面板背景? 我已经添加了这个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;}

但是这样 https://www.reddit.com/r/opengl/comments/279fc7/glsl_frag_update_values_to_a_texturemap_within/

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

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

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

1 个答案:

答案 0 :(得分:0)

背景由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);
}