javascript - 如何使用 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 中的隐藏属性时，我需要将父按钮背景更改为红色。如果不是，我需要将父按钮的背景更改为绿色吗？为此，我对当前组件进行了更改!

我怎样才能做到这一点？

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

//所以当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在你的子组件中

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

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

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