发布日期: 2026-01-26

如何恢复被覆写的 element-ui 样式

在使用 Element-UI 组件时，常常会遇到样式被全局或局部 scoped 样式覆写，导致组件显示异常。本文以 el-date-picker 的 popper-class 用法为例，介绍如何恢复被覆写的 Element-UI 样式。

总体思路

引入或复制 Element-UI 原始样式文件：
- 可以直接从 element-ui 源码包中找到对应组件的样式文件（如 date-picker、popper 等），复制需要的部分。
- 推荐只复制需要恢复的部分，避免样式冲突。
在组件的 <style scoped> 中引入：
- 将复制的样式粘贴到当前组件的 <style scoped lang="scss"> 块中。
- 注意：scoped 样式只作用于当前组件，能有效避免全局污染。
针对 popper 相关样式的特殊处理：
- el-date-picker 的弹出层（popper）默认渲染在 body 下，scoped 样式无法生效。
- 需通过 popper-class 属性为弹出层添加自定义 class（如 original-popper），并在组件样式中专门为该 class 编写样式。
- 可以将 element-ui 源码中 .el-picker-panel、.el-popper 等相关样式复制出来，改为 .original-popper 前缀。

步骤详解

1. 复制原始样式

以 el-date-picker 为例，在 element-ui/packages/theme-chalk/src/date-picker.scss 和 popper.scss 中找到相关样式。
复制如 .el-picker-panel、.el-popper 等样式内容。

2. 修改样式前缀

将所有 .el-picker-panel、.el-popper 等选择器，批量替换为 .original-popper，以便只影响通过 popper-class="original-popper" 渲染的弹出层。

/* 示例：将 element-ui 的弹窗样式复制并改为 original-popper 前缀 */
.original-popper {
  background: #fff;
  border: 1px solid #ebeef5;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
  border-radius: 4px;
  /* ...更多样式... */
}

3. 在组件中引入样式

在 <style scoped lang="scss"> 中粘贴上述样式。
示例：

<el-date-picker
  popper-class="original-popper"
  ...
/>

<style scoped lang="scss">
@import '~element-ui/packages/theme-chalk/src/common/var.scss';

.original-popper {
  /* 复制并修改后的样式 */
}
</style>