More than 5 years have passed since last update.

[Angular] 親コンポーネントから子コンポーネントのスタイルを変更しようとしたらハマった

Last updated at 2019-12-24Posted at 2019-12-24

やりたかったこと

親コンポーネントで定義したスタイルを子コンポーネントへ反映させたかった。

parent-compomemt.html

<parent-compomemt>
  <child-compomemt class="double-border">
</parent-compomemt>

child-compomemt.html

<input type="text" class="input">

下記のような定義ではスタイルは反映されない。
そもそも親から子のスタイルを変えるのはお作法的にも悪いとのこと。

parent-compomemt.scss

.double-border {
  .input {
    border: double;
  }
}

:hostを使用して、子コンポーネント側で定義すれば良い。

child-compomemt.scss

:host.double-border {
  .input {
    border: double;
  }
}