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

innnerHtmlouterHtmlで動的に要素を書き換えた場合、書き換え後の要素のクラスにCSSは当たらない。

当てるなら別途v-deepで当てる必要がある。

ライブラリ等で動的に生成される要素にも、<style scoped></style>に普通に書いた内容は効かない。

子コンポーネントにcssが当たらないのと同じ理屈。

参考にしたサイト
Vueで 動的に生成されるコンテンツにスタイルを当てる

無制限に質問可能なプログラミングスクール!

万が一転職できない場合は、転職保障全額返金できるコースもあり!!

無制限のメンター質問対応

 

DMMウェブキャンプでプログラミングを学習しませんか?

独学より成長スピードをブーストさせましょう!

 

まずは無料相談から!

おすすめの記事