如何更改父可重用组件's style from it'的子组件？-Java 学习之路

我在当前组件中使用了可重用的组件 . 但我想改变我的可重用组件的风格 . 如何覆盖子组件中的父可重用组件样式 .

父可重用组件：（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中更改样式？

1 回答

根据@vega评论，我读到：主持人，这解决了我的问题

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

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

回复于 2024-04-30T14:38:01+08:00

如何更改父可重用组件's style from it'的子组件？

1 回答

相关问题