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

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;
      }
  }