聊下 element-ui popper-class 用法

在开发过程中，有时候需要修改分页组件中，下拉框样式，色调。修改日期组件中样式；
发现 /deep/ 也不生效。样式方scope中，也不生效。去掉scope又会影响全局，其他组件样式。
不用scope，放自己外层的 class,里面，也会不生效。应该因为，想改变的是，element-ui 组件内又再引用的组件，不生效
这时候，在所需要改变样式的组件，通过 popper-class,加上自定义的 class. 这时候放scope里也行。
注意：比如组件嵌套3层，在最外层引入popper-class的css文件，里面也可以生效;

element-ui 的 popper-class 是用于 Popover 组件或其他类似弹出层的一个属性，它允许你给弹出层添加自定义的 CSS 类，从而方便地进行样式定制。

用法示例

假设你在使用 el-popover 组件时，你希望自定义弹出框的样式。你可以通过 popper-class 属性来添加 CSS 类：

<template>
  <el-popover
    trigger="click"
    placement="top"
    popper-class="custom-popover"
  >
    <span>点击我触发 Popover</span>
    <template #reference>
      <el-button>点击按钮</el-button>
    </template>
    <div>自定义内容</div>
  </el-popover>
</template>

<style>
.custom-popover .el-popover__content {
  background-color: lightblue;
  border-radius: 8px;
  padding: 10px;
  color: #333;
}
</style>

说明：

1. popper-class: 是 el-popover 组件的一个属性，接受一个 CSS 类名。在弹出的内容框上，会自动添加这个类，你就可以通过它来修改弹出层的样式。
2. 在上面的示例中，popper-class="custom-popover" 给弹出层的内容框添加了一个 custom-popover 类。
3. 在 style 标签中，我们对 .custom-popover 类进行了样式定制，改变了弹出框的背景色、边框圆角、内边距等样式。

注意事项：

• popper-class 只会影响弹出层的内容部分，而不会影响触发弹出框的元素。
• 你可以在 popper-class 中使用多个类名，以空格隔开多个自定义类。

这种方式特别适用于当你需要给弹出框加上一些额外的样式（如背景、边框、阴影等）时。