如何从子组件更改父可重用组件的样式？

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>

这是我当前的组件(outage.component.scss)

.outage-main{
    div:nth-child(1) {
            border: 5px solid red !important; 
    }
}

在这里，我尝试更改父组件的div样式。但是它并没有改变父div的样式。它正在改变我当前组件中div的样式。

如何更改我的settings-panel.component.html中的样式？

Answer 1

根据@vega的评论，我读到:host，这解决了我的问题

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

      div.settings-panel {
          border: 5px solid red !important;
      }
  }