I'm facing an issue with a reusable component in my current project. I need to modify the style of this reusable component, but I can't seem to figure out how to override the parent component's style within my child component.
Parent reusable component:(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>
This is my current component(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>
This is my current component (outage.component.scss)
.outage-main{
div:nth-child(1) {
border: 5px solid red !important;
}
}
I've been trying to update the parent component's div style, but it seems to only affect the current component's div. How can I make changes to the style in my settings-panel.component.html?