Стиль отключения панели расширения матов

Question

Как скрыть этот фон панели расширения матов, когда он отключен? я добавил это 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);}

когда я пытаюсь снять флажок "background", белый фон исчез, но я не знаю, что я должен делать в css

Answer 1

Фон добавляется mat-expansion-panel, который является родителем .mat-expansion-panel-header.Поэтому вы хотите изменить родительские стили в зависимости от атрибута (aria-disabled) дочернего элемента.

Это невозможно с помощью css.

Что вы можете сделать, это установить .mat-expansion-panel (parent) background-color для прозрачного по умолчанию.Так что перезаписать начальные значения.И вместо этого добавьте 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);
}