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

标签 javascript html css angular sass

我在我当前的组件中使用了一个可重用的组件。但是我想改变我的可重用组件的样式。我如何覆盖我的子组件中的父可重用组件样式。

父可重用组件:(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 中更改样式?

最佳答案

根据@vega 的评论,我阅读了有关 :host 的内容,这解决了我的问题

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

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

关于javascript - 如何从子组件更改父可重用组件的样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49333332/

相关文章:

javascript - 如何在javascript中移动元素

css - 两种颜色边框

javascript - 如何将搜索添加到 reveal.js 演示文稿?

javascript - 使用 ko.mapping.fromJS 时未触发 knockout 订阅回调

javascript - 如何在 jQuery .load() 之后更新 DOM?

javascript - 单页网站方法

javascript - 可拖动和边距 :0 auto;

html - 具有边框半径的元素之间的奇怪空间及其绝对定位的伪内容

php - for循环中的JQuery ajax函数表现得很奇怪

javascript - 参数无法访问 - [ts] 找不到名称 'product'