Vueのスコープ付きCSSで子コンポーネントにCSSを適用する【Vue3】
2024/06/12
※当ブログの記事にはアフィリエイトリンクを使用している場合があります。
目次
前提
スコープ付きCSSはファイル内の要素にだけ適用されるため、子コンポーネントにはCSSが適用されません。
解決方法
:deep() 擬似クラスを使用します。
プレイグラウンド
以下のURLから動作を確認することができます。
補足
Vue2では>>>、/deep/、::v-deep()を使うことができました。
Vue3でも動作しますが、非推奨となっています。
参考
関連記事
AWS IAMでPasskeyが利用可能に Windows PCで指紋認証を設定してみました
2024/08/22
React公式チュートリアルをVueでも書いて比較してみた
2024/06/22
Vercel(Hobby)→AWS Amplify 移行して分かった両者の違い
2024/05/17
手軽に使えるVueプレイグラウンド環境。Vue SFC Playground解説
2024/04/08
Vite、TailwindCSS v4環境を構築【Tailwind CSS v4-alpha】
2024/03/07
「vite-plugin-react can't detect preamble.」エラー対応【PHP、React】
2024/02/13
オススメ記事
React公式チュートリアルをVueでも書いて比較してみた
2024/06/22
フロントエンド開発体験を向上させる10のnpmライブラリ【2024年版】
2024/01/14
2024/01/19
VueのdefineModelを活用した入力コンポーネントの作成方法【Vue3.4】
2024/01/07
2024/03/07
Nuxt3にStorybookを導入する方法
2023/11/22
2024/03/18
NuxtJSを使ってブログを作ってみた【Nuxt Content/TailwindCSS/daisyUI】
2023/08/25
2024/01/19
メッセージ送受信時にスクロール位置を最下部に維持する処理を実装【TypeScript/Vue.js】
2023/08/01
