如何使用scss根据隐藏属性更改样式？

Question

父级可复用组件：(settings-panel.component.html)

<button>
    <app-svg-icon [iconSrc]="iconSrc"></app-svg-icon>
</button>
<div [ngClass]="position" class="settings-panel" [hidden]="!panelIsVisible">
    <span class="arrow"></span>
    <ng-content></ng-content>
</div>

这是我当前的组件（outage.component.html）

 <app-settings-panel class="outage-main" iconPath="alert.svg" position="right bottom">
     <div class="outage-panel">
        <div class="outage-heading">
            <span>Notifications</span>
            <span>New</span>
        </div>      
        <span *ngFor="let outage of outageArray">
            <button type="button" class="outage-group-item">
                <span>{{outage}}</span>
            </button>
        </span>
     </div>
 </app-settings-panel>

这是我当前的组件scss（outage.component.scss）

   :host ::ng-deep app-settings-panel {

        div.settings-panel {
            right:-1px !important;
            top:none !important;
        }

        button{  
            background: #152935!important;      
            padding: 12px !important;
        }
     }

所以在这里，在我当前的组件中，我正在使用设置面板组件。所以每当hidden attributein parent div 出现在父组件中时，我需要将父按钮背景更改为红色。如果没有，我需要将父按钮的背景更改为绿色？我已经对当前组件进行了更改以执行此操作！

我怎样才能做到这一点？

我想过这样做，但是这个语法错误

//所以当div被隐藏时，我需要让按钮背景发生变化

:host ::ng-deep app-settings-panel div.settings-panel[hidden]{   
    :host ::ng-deep app-settings-panel button {
        background:red;
    }
}

如果需要更多解释，请提出建议，以便我可以更清楚地编辑。

任何帮助将不胜感激！

Answer 1

编辑：

在您的中断组件中，只需修改您现有的 scss

:host ::ng-deep app-settings-panel {

    div.settings-panel {
        right:-1px !important;
        top:none !important;

     &[hidden] button //Add this rule
     {
         background-color: red;
      }
    }

    button{  
        background: #152935!important;      
        padding: 12px !important;
    }
 }

只需在您的子组件中使用host

从父组件中，当 div 打开时，在 <app-settings-panel 的某处设置一个 open 类

然后在子组件中你可以像这样设置按钮样式

:host(.open) ::ng-deep button
{
    background-color: blue;
}