Блог

Как скрыть этот 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);}
  

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

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

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

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