::v-deep
をCSS側で付与して解決。
↓こんな感じ。
.thumbnail {
flex-grow: 1;
object-fit: cover;
max-height: 150px;
max-width: 300px;
margin: 0.2rem;
border-radius: 4px;
}
::v-deep .thumbnail {
flex-grow: 1;
object-fit: cover;
max-height: 150px;
max-width: 300px;
margin: 0.2rem;
border-radius: 4px;
}
innnerHtml
やouterHtml
で動的に要素を書き換えた場合、書き換え後の要素のクラスにCSSは当たらない。
当てるなら別途v-deepで当てる必要がある。
ライブラリ等で動的に生成される要素にも、<style scoped></style
>に普通に書いた内容は効かない。
子コンポーネントにcssが当たらないのと同じ理屈。
参考にしたサイト
Vueで 動的に生成されるコンテンツにスタイルを当てる