Vue页面内修改外部引进组件CSS(局部修改)
前言
在实际的Vue项目中，我们经常需要引进一些外部组件，elementUI, ant-designed，之类的，而且我们总需要在某些下，对这些个组件的某些样式进行修改（不影响全局样式的情况下修改）
实现
第一种
在选择器前面加个id选择器来限制
<template>
<div id ="wrapper">
<el-dialog></el-dialog>
</div>
</template>
<style>
#wrapper .el-dialog {
width: 800px
}
</style>
第二种
在选择器前面加个类选择器来限制
<template>
<div class ="wrapper">
<el-dialog></el-dialog>
</div>
</template>
<style>
#wrapper .el-dialog {
width: 800px
}
</style>
第三种
在vue中，我们为了避免父组件的样式影响到子组件的样式，会在style中加<style scoped>，这样父组件中如果有跟子组件相同的class名称或者使用选择器的时候，就不会影响到子组件的样式。如果让父组件的样影响到子组件，那么我们就需要/deep/
<template>
<div id="wrapper">
<el-dialog></el-dialog>
</div>
</template>
<style scoped>
/deep/ .el-dialog{
width:800px
}
</style>// 当然了把 /deep/ 换成 >>>，也可以达到同样的效果
注意：
1.前两种不能加上scoped不然不会生效
2.el-dialog 中有个append-to-body的属性，在对局部组件的样式进行修改时，一定要注意这个属性的值要为false，不然无法生效
3./deep/ 和 >>> 不能用在 lang = ‘scss’ 的 style 内。
本文系转载，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
本文系转载，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
腾讯云开发者
