After vue uses scoped, changing the UI component style is invalid

In the development of the vue project, if you want to change the style of UI components, after adding the scoped restriction, the style change is invalid. If you don't add it, if other pages have the same class name, it will affect the style of other pages. One way to get the best of both worlds is to use /deep/ to modify the style of the component.

Take the modification of the el-dialog bullet box head style of element UI as an example

No scoped modification, but if there are pop-ups on other pages, it will affect other pages

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

Before modifying the style

after modification

Add scoped modification, use /deep/ to modify the style of the component, it will not affect the style of the popup on other pages

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