vueでelementUIスタイルが変更できない問題

最近開発中にelementUIスタイルを修正しているのを見つけたときにscopedのコンポーネントでは修正できないスタイルを追加してscopedを外せばいいのです.ここではまずscopedという属性の役割と原理を見てみましょう.
一:scopedの役割と原理

scopedの役割:

上述代码将会编译成：

.a[data-v-f3f3eg9] .b { /* ... */ }

Sassのようなプリプロセッサでは正しく解析できないものもあります>>>>.この場合、/deep/オペレータを使用して代わりに使用できます.これは>>>の別名で、同じように正常に動作します.親コンポーネントcssName+/deep/+サードパーティライブラリで変更が必要なcssName、たとえば.parentCssName /deep/ .libCssName{}

 #table-role /deep/ .el-table__empty-block{
  height: 570px;
  overflow: auto;
}

四:動的に生成されたコンテンツv-htmlで作成されたDOMコンテンツは、役割ドメイン内のスタイルの影響を受けませんが、深度作用セレクタでスタイルを設定することができます.
五:注意事項

CSS役割ドメインはclassの代わりに使用できません.ブラウザが様々なCSSセレクタをレンダリングする方法を考慮すると、p{color:red}が役割ドメインを設定した場合(すなわち、プロパティセレクタと組み合わせて使用する場合)は、何倍も遅くなります.classやidを使って取って代わると、例えば.Excample{color:red}では、パフォーマンスの影響は解消されます.この試験田中でそれらの違いをテストすることができます.

再帰コンポーネントでは、子孫セレクタの使用に注意してください.セレクタを合わせるa .bのCSSルールでは、一致する場合.aの要素は再帰的なサブアセンブリを含む、すべてのサブアセンブリの中にある.bはすべてこの規則に一致する.