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

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

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

<template>
<div >

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

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

<template>
<div >

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