el-popover修改样式

有时候，我们需要修改一下el-popover的样式，会发现网上的好多教程不仅不生效，反而很麻烦，其原因是el-popover的div不在当前组件内生成，这就导致了无论我们如何修改样式都不生效，我看到网上生效的一篇文章是给el-popover加上一个专有的类名poper-class

<el-popover
    placement="right"
    width="400"
    trigger="hover"
    popper-class="popoverStyle"
    >

然后取消scoped,

<style lang="scss">
	.el-popover.popoverStyle{
		padding:20px;
		font-size：12px;
		color:#333;
	}
</style>

这样虽然能够成功，但却不太舒服，会造成全局污染，现在推荐这一种写法，

                   <el-popover
                        placement="bottom"
                        :width="300"
                        trigger="click"
                    >
                    <template #default>
                            <div class="el-popover">1111</div>
                    </template>

加上一个template标签，直接给div加上class名字，

.el-popover{
		background-color: black;
		color:#ec0f0f;
	}

这样就直接生效了 

在这里进行更新一下，这种方式可以成功而且不会污染，但也会有一个问题，就是加入后的模板实在el-popove里面的，如果只修改字体大小和颜色是没有什么区别的，但添加背景颜色后就会出现不好的效果，这种做法是不对的，所以任然采用第一种办法，只不过，在新建一个style，不加scoped，起一个特殊的名字就好了

<style lang="scss" scoped>
	
</style>
<style lang="scss">
	.el-popover.popoverStyle{
		padding:20px;
		font-size：12px;
		color:#333;
	}
</style>