vue使用scoped之后，改变UI组件样式无效问题

在vue项目的开发中，想要改变UI组件的样式，在加了scoped限制后，样式改变无效，不加的话，如果其他页面有相同类名，又会影响其他页面的样式。其中一种两全其美的方法就是使用/deep/深度修改组件的样式。

以修改element UI的el-dialog弹框头部样式为例

不加scoped的修改，但是如果其他页面也有弹框就会影响到其他页面

<el-dialog title="删除" :visible.sync="delDialogVisible">
	您确定要删除吗？
	<span slot="footer" class="dialog-footer">
		<el-button @click="delDialogVisible = false">取 消</el-button>
		<el-button type="primary" @click.native="deleteSubmit">确 定	</el-button>
	</span>
</el-dialog>

<style>
.el-dialog__header {
    
    
	background: aqua;
}
</style>

修改样式之前

修改之后

加scoped的修改，使用/deep/深度修改组件的样式,不会影响到其他页面的弹框样式

<div class="dialogSty">
	<el-dialog title="删除" :visible.sync="delDialogVisible">
		您确定要删除吗？
		<span slot="footer" class="dialog-footer">
			<el-button @click="delDialogVisible = false">取 消</el-button>
			<el-button type="primary" @click.native="deleteSubmit">确 定	</el-button>
		</span>
	</el-dialog>
</div>

<style  scoped>
.dialogSty /deep/ .el-dialog__header {
    
    
	background: bisque;
}
</style>