Angular 修改子组件的样式

<!-- 父组件 father.html -->
<div class="father">
  <dwb-child></dwb-child>
</div>
<div class="other">
  <dwb-child></dwb-child>
</div>

 

<!-- 子组件 child.html -->
<h2>我是子组件H2</h2>
<h3>我是子组件H3</h3>

一、 在子组件中，根据父组件来改变自身的样式：

// 子组件样式  child.component.scss
:host-context(.father) h2 {
  background: red;
}
:host-context(.other) h2 {
  background: orange;
}

结果：

 

 

 二、在父组件中，来修改子组件的样式

// 父组件样式  father.component.scss
::ng-deep dwb-child {
  h2 {
    color: beige;
  }
  h3 {
    color: blue;
  }
}

结果：