关于npm垂直时间线组件异常及修改竖线颜色的技术求助

使用一款npm垂直时间线组件时出现异常（效果如图），同时希望修改组件竖线的颜色，但查阅完整文档未找到方法，请求帮助。

以下是我的代码：

<VerticalTimeline className="vertical_timeline .vertical-timeline.vertical-timeline-custom-line">
        ::before
      <VerticalTimelineElement
    className="vertical-timeline-element--work"
    contentStyle={{ background: 'white', color: '#fff' }}
    contentArrowStyle={{ borderRight: '7px solid  white' }}
    date="2021-Present"
    iconStyle={{ background: 'yellow', color: 'yellow' }}
    // icon={<WorkIcon />}
  >
    <h3 className="vertical-timeline-element-title centerit3" style={{color:"yellow"}}>First sem passed </h3>
    <h4 className="vertical-timeline-element-subtitle centerit3">123</h4>
    <p className="centerit3">
      Btech in CSE 
    </p>
  </VerticalTimelineElement>

解决方法 #

1. 修复组件异常 #

代码里<VerticalTimeline>标签内的::before是CSS伪元素语法，不能直接写在JSX结构里，这是导致组件渲染异常的核心原因，直接删除这一行即可。修正后的代码：

<VerticalTimeline className="vertical_timeline vertical-timeline-custom-line">
  <VerticalTimelineElement
    className="vertical-timeline-element--work"
    contentStyle={{ background: 'white', color: '#fff' }}
    contentArrowStyle={{ borderRight: '7px solid white' }}
    date="2021-Present"
    iconStyle={{ background: 'yellow', color: 'yellow' }}
    // icon={<WorkIcon />}
  >
    <h3 className="vertical-timeline-element-title centerit3" style={{color:"yellow"}}>First sem passed </h3>
    <h4 className="vertical-timeline-element-subtitle centerit3">123</h4>
    <p className="centerit3">
      Btech in CSE 
    </p>
  </VerticalTimelineElement>
</VerticalTimeline>

2. 修改竖线颜色 #

组件的竖线由.vertical-timeline::before伪元素控制，通过自定义CSS覆盖默认样式即可：
在你的项目CSS文件中添加如下代码，替换颜色值为你需要的颜色：

.vertical-timeline-custom-line::before {
  background-color: #2ecc71; /* 示例：绿色，可替换为任意颜色值 */
}

确保你的CSS文件已正确引入项目，且自定义类vertical-timeline-custom-line的优先级足够覆盖组件默认样式。

内容的提问来源于stack exchange，提问作者Anshu Joshi