vue页面修改外部组件样式，而不影响其他页面引用

1，在选择器前面加个Id选择器来限制

<template>
<div id="wrapper">

</div>
</template>
<style>
#warp .el-dialog{
width:800px
}
</style>
2，使用/deep/

在vue中，我们为了避免父组件的样式影响到子组件的样式，会在style中加<style scoped>，这样父组件中如果有跟子组件相同的class名称或者使用选择器的时候，就不会影响到子组件的样式。如果让父组件的样影响到子组件，那么我们就需要/deep/

<template>
<div id="wrapper">

</div>
</template>
<style scoped>
/deep/ .el-dialog{
width:800px
}
</style>
当然了把 /deep/ 换成 >>>，也可以达到同样的效果 

vue页面修改外部组件样式，而不影响其他页面引用

原文：https://www.cnblogs.com/ckmouse/p/12720549.html