Vue.jsでのdeep selectorの書き方
久しぶりの投稿です。
備忘を兼ねて簡単に書きます。
deep selector?
Vue.js でscoped付でstyle を書いている場合に、そのコンポーネントの子コンポーネントにもstyleを追加したい場合に使用するcss のセレクターの書き方です。
書き方
.hoge >>> .huga{...}
>>>
または/deep/
で出来るとなっています。
(参考:https://vue-loader-v14.vuejs.org/ja/features/scoped-css.html)
が、効かない場合がある。その時は?
原因を調べていないのですが、Versionか構成かで上記の書き方だと効かない場合があります。
調べてみたところ、次の書き方だと意図したとおりになりました。
.hoge ::v-deep .huga{...}
どうも、>>>
や/deep/
が解釈されなかったようです。
もしdeep selectorが解釈されていない場合があったら、::v-deep
を試してください。
参考
Deep Selectors
https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors
Vue LoaderのDeep Selectorの::v-deep
https://blog.mahoroi.com/posts/2019/03/scoped-css-v-deep/
スコープ付き CSS
https://vue-loader-v14.vuejs.org/ja/features/scoped-css.html
Author And Source
この問題について(Vue.jsでのdeep selectorの書き方), 我々は、より多くの情報をここで見つけました https://qiita.com/h-naito/items/f6ca679276282dce2600著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .