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 内。