el-popover修改样式el-plus

### 自定义 Element Plus `el-popover` 组件的样式

为了自定义 `el-popover` 组件的样式，可以通过多种方法实现这一目标。以下是几种常见的方式：

#### 方法一：使用内联样式或类名覆盖默认样式

可以直接通过 CSS 类来覆盖默认样式。如果希望对特定实例应用样式，则可以在模板中为该组件指定一个唯一的 class 或 id。

<template>
  <div>
    <!-- 使用 custom-class 属性 -->
    <el-popover
      placement="top-start"
      title="标题"
      width="200"
      trigger="hover"
      :append-to-body="false"
      custom-class="custom-popover">
      这是一段内容...
      <el-button slot="reference">hover 激活</el-button>
    </el-popover>

    <!-- 定义对应的CSS规则 -->
    <style scoped lang="scss">
      .custom-popover {
        background-color: #f9fafc;
        border-radius: 8px;

        /* 更改箭头颜色 */
        &[x-placement^='bottom'] .popper__arrow::after,
        &[x-placement^='top'] .popper__arrow::after {
          border-top-color: #f9fafc !important;
        }
        
        h3.el-popover__title { color: blue; }

        p { font-size: 14px; line-height: 1.5em;}
      }
    </style>
  </div>
</template>

这种方法简单直观，适用于简单的样式调整[^1]。

#### 方法二：全局样式定制

对于更广泛的样式更改，比如改变整个应用程序中的所有 popovers 外观，推荐创建一个新的 SCSS 文件并引入到项目中，在其中重写 `.el-popover`, `.el-popper`, 及其他相关的选择器。

/* _variables.scss */

$popover-bg-color: #fffefb;
$border-radius-base: 8px;
$text-color-primary: #3eaf7c;

// Override default styles globally.
@import '~element-plus/packages/theme-chalk/src/popover';

.popover-customization {
  @extend .el-popover;
  
  background-color: $popover-bg-color;
  border-radius: $border-radius-base;
}

之后确保此文件被正确加载至项目的构建过程中[^2]。

#### 方法三：利用深 Class Selectors 修改内部结构

有时可能需要深入修改 Popover 内部 HTML 结构上的某些部分（如标题栏）。此时可借助于深度作用域操作符 `/deep/`(Vue CLI) 或者 ::v-deep (Vite)，具体取决于所使用的打包工具版本。

<style scoped>
.custom-popover /deep/ .el-popover__title {
  text-align: center;
}

/* For Vite users */
.custom-popover::v-deep(.el-popover__title){
  text-align: center;
}
</style>

这种方式允许更加精细地控制子元素的表现形式而不影响外部环境。