vueの親コンポーネントのサブコンポーネントスタイルの変更方法
1711 ワード
文書ディレクトリ一、scoped を取り除く二、ローカルスタイルとグローバルスタイルの混在 三、深さ作用セレクタ を用いる
vueを用いた開発では,UIコンポーネント(ElementUI,iview)を含む外部コンポーネントを参照することがある.
、scopedを り く
コンポーネントの
、ローカルとグローバルスタイルの
1つのコンポーネントで、アクティブドメインと アクティブドメインのスタイルを に できます.
vueを用いた開発では,UIコンポーネント(ElementUI,iview)を含む外部コンポーネントを参照することがある.
タグにscoped
がある 、そのCSSは のコンポーネント の にのみ する.しかし、 コンポーネントにscoped
を すると、 コンポーネントのスタイルが コンポーネントに しないため、 コンポーネントに コンポーネントのスタイルを くことは ではありません.、scopedを り く
コンポーネントの
からscoped
を すると、 コンポーネントに コンポーネントのスタイルを くことができますが、グローバルスタイルを するのではないかと します.【グローバルスタイルを しく する は、グローバルなapp.cssを することであることを っているからです】、ローカルとグローバルスタイルの
1つのコンポーネントで、アクティブドメインと アクティブドメインのスタイルを に できます.
我们把 需要修改子组件的样式 写在上面那个全局样式里面
三、使用深度作用选择器
如果你希望
scoped
样式中的一个选择器能够作用得“更深”,例如影响子组件,你可以使用>>>
操作符:
SASSのようなプリプロセッサでは、>>>
を正しく解析できないものもあります.この場合、/deep/
オペレータで置き換えることができます.これは>>>
の別名で、同じように正常に動作します.
OK、主な内容は以上の点です.
追加の補足が必要です:1、v-htmlで作成されたDOMコンテンツは、役割ドメイン内のスタイルの影響を受けませんが、深さの役割セレクタでスタイル2を設定することができます.CSS役割ドメインはclass 3の代わりに使用できません.再帰コンポーネントで子孫セレクタを使用することに注意してください.
--------------------------------------------------------------------------------------------------------------------------
最後に書きます.
規則は配置------ソフトウェア開発の簡略原則より優れている.
--------------------------------
(完)---------------------------------------------------
私の:個人のウェブサイト:https://neveryu.github.io/neveryu/Github: https://github.com/Neveryu新浪微博:https://weibo.com/Neveryu
もっと勉強してください.私の新浪微博に注目してください.