Vueのスコープ付きCSSで子コンポーネントにCSSを適用する【Vue3】

2024/06/12

※当ブログの記事にはアフィリエイトリンクを使用している場合があります。

前提

スコープ付きCSSはファイル内の要素にだけ適用されるため、子コンポーネントにはCSSが適用されません。

:deep() 擬似クラスを使用します。

以下のURLから動作を確認することができます。

Vue2では>>>、/deep/、::v-deep()を使うことができました。

Vue3でも動作しますが、非推奨となっています。

この記事をSNSで共有する

Webシステムエンジニア / DTMer

あっしゅからー

フリーランスでWebシステムエンジニアをやっています。

趣味ではDTMをしていて、オリジナル曲をニコニコ動画やYouTubeに投稿しています。