Javascript 垂直时间线：更改第一个元素的文本颜色

我使用的是VerticalTimeline，VerticalTimeline元素来自“反应垂直时间轴组件”

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

+10
营养

试过一个健康的接受者

+30
健身

30分钟慢跑

我的时间线的第一个元素是蓝色背景色和白色文本。其他的有白色背景和黑色文本。我怎样才能把它换成第一个呢

---

如果我更改

contentStyle={{background:'rgb（33150243）“

变为白色，则文本框变为白色，但文本也是白色，因此我无法看到任何文本。那么如何更改文本颜色？

在

contentStyle

对象中，

颜色：“#fff'

将文本颜色设置为白色。要使文本颜色变为黑色，只需将值

#fff

更改为CSS颜色，表示黑色，例如s

#000

或

黑色

：

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