VerticalTimeline: change text color of first element

Question

I am using VerticalTimeline, VerticalTimelineElement from 'react-vertical-timeline-component';

<VerticalTimelineElement
className="vertical-timeline-element--work"
contentStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
contentArrowStyle={{ borderRight: '7px solid  rgb(33, 150, 243)' }}
date="18-09-2020"
iconStyle={{ background: 'rgb(16, 204, 82)', color: '#fff' }}
icon={<Kitchen />}
>
<h3 className="vertical-timeline-element-title">+10</h3>
<h4 className="vertical-timeline-element-subtitle">Nutrition</h4>
<p>
    Tried a healthy recipie
 </p>
</VerticalTimelineElement>
<VerticalTimelineElement
className="vertical-timeline-element--work"
date="13-8-2020"
iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
icon={<FitnessCenter />}
>
<h3 className="vertical-timeline-element-title">+30</h3>
<h4 className="vertical-timeline-element-subtitle">Fitness</h4>
<p>
    30 Minutes Jog
</p>

The first element of my timeline has a blue background color and white text. Others have white backgrounds and black text. How can I change it for the first one?

If I change contentStyle={{ background: 'rgb(33, 150, 243)' to white then the textbox becomes white but the text is also white so I can't see any of it. How do I change the text color then?

Answer 1

In the contentStyle object, color: '#fff' sets the text color to white. To make the text color black, just change the value #fff to a CSS color meaning black, such as #000 or black:

contentStyle={{ background: 'rgb(33, 150, 243)', color: '#000' }}