前言
在实际的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 内。