使用过el-popover组件的同学都会发现,直接修改背景色是修改不掉的,重新定义一个类名就可以了,代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<style>
.wrap {
background: #03204e !important;
color: #fff !important;
border: 1px solid #0368f9 !important;
}
.wrap[x-placement^="bottom"] .popper__arrow::after {
border-bottom-color: #03204e !important;
}
.wrap[x-placement^="bottom"] .popper__arrow {
border-bottom-color: #0368f9 !important;
}
</style>
</head>
<body>
<div id="app">
<el-popover placement="bottom" width="300" trigger="click" popper-class="wrap">
<el-button type="primary" slot="reference">点击</el-button>
<div>
popover弹窗内容
</div>
</el-popover>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data: function () {
return {}
}
})
</script>
</html>