如何使用 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;
        }
     }

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

我怎样才能做到这一点？

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

所以当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;
}