En el desarrollo del proyecto vue, si desea cambiar el estilo de los componentes de la interfaz de usuario, después de agregar la restricción de alcance, el cambio de estilo no es válido. Si no lo agrega, si otras páginas tienen el mismo nombre de clase, afectar el estilo de otras páginas. Una forma de obtener lo mejor de ambos mundos es usar / deep / para modificar el estilo del componente.
Tome la modificación del estilo de la cabeza del cuadro de viñetas el-dialog de la interfaz de usuario del elemento como ejemplo
Sin modificación de alcance, pero si hay ventanas emergentes en otras páginas, afectará a otras 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 el estilo
después de la modificación
Agregue modificación de alcance, use / deep / para modificar el estilo del componente, no afectará el estilo de la ventana emergente en otras 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>
