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;
  }
}

結果：