Styling getting overridden?

[Calvin Chhour]

Hi!

Love the component first of all, thanks for your time and energy in this project!

So I am running into an issue where the styling of my Text components composed within a VerticalTimelineElement loses its styling.

For example, I grab the code that forms this from the demo:

and mine turns out more like this:

notice the header elements lose their header styling.

Any idea what is going on?

code snippet

<VerticalTimeline layout="1-column">
	<VerticalTimelineElement
		className="vertical-timeline-element--work"
		contentStyle={{ background: FILL_COLOR, color: '#000' }}
		contentArrowStyle={{ borderRight: `7px solid ${FILL_COLOR}` }}
		date="Late Nov"
		iconStyle={{ background: FILL_COLOR, color: '#000' }}
	>
		<Text fontSize="xl">Second title</Text>
	</VerticalTimelineElement>
	<VerticalTimelineElement
		className="vertical-timeline-element--work"
		contentStyle={{ background: FILL_COLOR, color: '#000' }}
		contentArrowStyle={{ borderRight: `7px solid ${FILL_COLOR}` }}
		date="Late Nov"
		iconStyle={{ background: FILL_COLOR, color: '#000' }}
	>
		<Text fontSize="xl">First title</Text>
	</VerticalTimelineElement>
	<VerticalTimelineElement
		className="vertical-timeline-element--work"
		contentStyle={{ background: FILL_COLOR, color: '#000' }}
		contentArrowStyle={{ borderRight: `7px solid ${FILL_COLOR}` }}
		date="Late Nov"
		iconStyle={{ background: FILL_COLOR, color: '#000' }}
	>
		<Text fontSize="xl">Third title</Text>
	</VerticalTimelineElement>
	<VerticalTimelineElement
		className="vertical-timeline-element--work"
		contentStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
		contentArrowStyle={{ borderRight: '7px solid  rgb(33, 150, 243)' }}
		date="2011 - present"
		iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
	>
		<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>
	<VerticalTimelineElement
		className="vertical-timeline-element--work"
		date="2010 - 2011"
		iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
	>
		<h3 className="vertical-timeline-element-title">Art Director</h3>
		<h4 className="vertical-timeline-element-subtitle">
			San Francisco, CA
		</h4>
		<p>
			Creative Direction, User Experience, Visual Design, SEO, Online
			Marketing
		</p>
	</VerticalTimelineElement>
</VerticalTimeline>

[Stéphane Monnot]

did you find a fix ?