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 ::ng-deep app-settings-panel {

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

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

1 个答案: