Depois que vue usa o escopo, alterar o estilo do componente de IU é inválido

No desenvolvimento do projeto vue, se você quiser alterar o estilo dos componentes da IU, após adicionar a restrição de escopo, a mudança de estilo é inválida. Se você não adicionar, se outras páginas tiverem o mesmo nome de classe, afetam o estilo de outras páginas. Uma maneira de obter o melhor dos dois mundos é usar / deep / para modificar o estilo do componente.

Pegue a modificação do estilo do cabeçalho da caixa de marcadores el-dialog do elemento UI como um exemplo

Sem modificação de escopo, mas se houver pop-ups em outras páginas, isso afetará outras páginas

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

Antes de modificar o estilo

após modificação

Adicionar modificação de escopo, usar / deep / para modificar o estilo do componente, isso não afetará o estilo do pop-up em outras páginas

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