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