やりたかったこと
親コンポーネントで定義したスタイルを子コンポーネントへ反映させたかった。
parent-compomemt.html
<parent-compomemt><child-compomemtclass="double-border"></parent-compomemt>child-compomemt.html
<inputtype="text"class="input">下記のような定義ではスタイルは反映されない。
そもそも親から子のスタイルを変えるのはお作法的にも悪いとのこと。
parent-compomemt.scss
.double-border {
.input {
border: double;
}
}
解決策
:hostを使用して、子コンポーネント側で定義すれば良い。
child-compomemt.scss
:host.double-border {
.input {
border: double;
}
}