vant-UIライブラリのスタイル変更が無効な問題を解決します。


最近vueでページを書く時、vantの一部のUIコンポーネントを使って、自分のスタイルを満足できないことを発見しました。CSSスタイルを修正するのはやはり無効です。cssは一般的にsassやlessを使いますが、scopedを加えて修正したスタイルは役に立たないので、importを入れても大丈夫です。

vueプロジェクトでは、「style」タグにscoped属性がある場合、そのCSSスタイルは現在のコンポーネントの要素にのみ作用し、親コンポーネントのスタイルはサブアセンブリに浸透しません。
解決策:
1.css文法に役立つ
深さセレクタを使用して、>>オペレータを使用して、scopedスタイルの中のセレクタを"深さ"にします。すなわち、サブアセンブリに影響を与えます。
上記のコードはコンパイルされます。
2.scssに対して、lessのようなプリプロセッサ
deep/オペレータを使って代わります。これは一つの>>の別名です。
コードは以下の通りです

このようにスタイルを変更すると効果的です。
補足知識:vantはコンポーネントのスタイルをカバーできません。
問題の説明:
コンポーネントのスタイルを変更する時、一部の変更は効果がなくて、ブラウザでも修正の内容が見えません。scopedを除いたら効果があります。

<style lang="scss" scoped>
</style>
3つの解決方法:
1、次にscopedの