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/ 换成 >>>,也可以达到同样的效果 

posted @ 2020-04-17 16:02  青春无敌小宇宙  阅读(2953)  评论(0编辑  收藏  举报