/deep/vueでの使用、サードパーティ製コンポーネントスタイルの変更

グローバルスタイルの変更を回避し、全体的なスタイルの使用を破壊する方法開発で問題が発生しました.vueプロジェクトはelementuiと組み合わせて使用されていますが、elementuiのスタイルは必ずしも私たちのニーズに合っていないので、そのスタイルを変更する必要があります.element-uiの共通スタイルファイルを直接変更すると、グローバルスタイルが変更されます.どのようにして特定のコンポーネントでサードパーティコンポーネントのスタイルを変更することができますか?これにより、element-uiのmenuの背景色を変更するなど、サードパーティコンポーネントのスタイルを変更することができます.

セレクタを使用して、/deep/

<style scoped>
  .barbox /deep/ .el-menu {
    background-color: #6a4318;
    color: white;
    left: 23%;
  }
</style>

これにより、親要素の深さを見つけて、変更する必要があるサブ要素を見つけて、そのスタイルを変更することができます.scopedプロパティを使用すると、特定のコンポーネントのスタイルを変更するとともに、グローバルスタイルが変更されないことを保証します.