element样式冲突：el-popper弹窗样式冲突避坑

最近，又踩上element大坑了。
当同一个页面重复使用了不同样式的el-popper弹窗，但是页面只认其中一个样式，其实就相当于重写被覆盖了。而且element的样式重写是要在没有scoped属性的，所以一旦被重写，就是整个el-popper的弹窗样式被覆盖了。
不过，我也找到了解决方案，只需要在用到el-popper的HTML上加popper-class属性，加以区分，然后在css里加上对应的popper-class在前面，结合less使用：
例如：
这是使用场景1

		<el-date-picker
          v-model="gysForm.day"
          type="date"
          :format="date"
          popper-class="popperClass"
        />

在对应的css里要这样改，要在前面加上.popperClass这个类名进行区分

<style lang="less">
.popperClass{
&.el-popper .popper__arrow,
.el-popper .popper__arrow::after {
  display: none !important;
}
}

</style>

这是使用场景2

	<el-popover
      ref="popover"
      placement="bottom-start"
      trigger="click"
      popper-class="rewriteStyle"
      :content="content"
    >
    </el-popover>

在对应的css里要这样改，要在前面加上.rewriteStyle这个类名进行区分

.rewriteStyle {
&.el-popper .popper__arrow,
.el-popper .popper__arrow::after {
  display: block !important;
}
}

这样就算在同一个页面使用，也不会有冲突了。