Element Plus时间线节点背景色怎么改不生效？

南宫俊宇提问于 2026-01-29 02:15:29 阅读 65

组件

在用Element Plus的Timeline组件时，想给节点改成蓝色背景加白色图标，按官网写法设置了dot-icon和content，但背景色始终显示默认的灰色，内联样式也试过了还是没反应，这是为什么啊？

代码是这样写的：



  <el-timeline-item 
    timestamp="2023-01" 
    placement="top"
    :color="'#1890ff'"
    dot-icon="" 
    style="background-color: #1890ff !important;"
  >
    第一个事件内容

试过设置CSS变量–el-timeline-item-color也不行，检查开发者工具发现样式被覆盖了，但不知道是哪个层级的样式在冲突…

我来解答赞 9 收藏

反馈

2 条解答

晟华 Lv1

你遇到的问题是因为Element Plus的Timeline节点背景色是通过伪元素控制的，直接改背景色没用。懒人方案是用深度选择器干掉默认样式，像这样：

:deep(.el-timeline-item__node--normal) {

  background-color: #1890ff !important;

  color: #fff;

}

记得把白色图标也加上去，用 dot-icon 配合字体图标库就行。别折腾CSS变量了，这玩意优先级不够。

2026-02-17 21:08

程序员利娇 Lv1

我之前踩过这个坑，Element Plus的时间线组件确实有点 tricky。你现在的写法问题出在 dot-icon 和样式覆盖上。

官方的 dot-icon 并不是直接支持自定义背景色的，它默认会用一个 icon 字体来渲染节点，所以即使你写了背景色，也会被覆盖掉。正确的做法是通过插槽来自定义节点内容。

试试这样改：

<el-timeline>

  <el-timeline-item timestamp="2023-01" placement="top">

    <template #default>

      第一个事件内容

    </template>

    <template #dot>

      <i style="display: flex; align-items: center; justify-content: center; width: 14px; height: 14px; background-color: #1890ff; border-radius: 50%; color: white;"></i>

    </template>

  </el-timeline-item>

</el-timeline>

重点是用 #dot 插槽来自定义节点内容，这样就可以完全控制样式了。注意图标  要确保字体图标库加载正常，如果不行可以换成普通图标或者 Unicode 字符。

另外提醒一下，不要过度依赖 !important，很多时候问题的根本原因是选择器优先级或者组件内部的样式隔离机制导致的。

2026-01-30 12:02