why the npm element is breaking?-CodePudding

I am trying to use vertical timeline component , npm package , but idk why its breaking as shown in the picture and also , is there any way where i can change the color of the vertical line ? I have read whole document but not able to find any method.This is the image Can anyone help me with this ? Any help would be appreciated.

<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>

CodePudding user response：

You can use this attribute in VerticalTimeline

lineColor ="colorName"

See below

<VerticalTimeline lineColor="red">
        <VerticalTimelineElement
          className="vertical-timeline-element--work"
          contentStyle={{ background: "rgb(33, 150, 243)", color: "#000" }}
          contentArrowStyle={{ borderRight: "7px solid  rgb(33, 150, 243)" }}
          date="2011 - present"
          iconStyle={{ background: "rgb(33, 150, 243)", color: "#000" }}
          icon={<Settings />}
        >
          <h3 className="vertical-timeline-element-title">Creative Director</h3>
          <h4 className="vertical-timeline-element-subtitle">Miami, FL</h4>
          <p>
            Creative Direction, User Experience, Visual Design, Project
            Management, Team Leading
          </p>
        </VerticalTimelineElement>