VerticalTimeline：更改第一个元素的文本颜色答案

【问题标题】：VerticalTimeline: change text color of first elementVerticalTimeline：更改第一个元素的文本颜色
【发布时间】：2021-01-06 01:14:04
【问题描述】：

我正在使用“react-vertical-timeline-component”中的 VerticalTimeline，VerticalTimelineElement；

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

我的时间线的第一个元素具有蓝色背景和白色文本。其他有白色背景和黑色文本。第一个怎么改？

如果我将contentStyle={{ background: 'rgb(33, 150, 243)' 更改为白色，则文本框变为白色，但文本也是白色的，因此我看不到任何内容。那我该如何改变文字颜色呢？

【问题讨论】：

标签： javascript css reactjs typescript timeline

【解决方案1】：

在contentStyle 对象中，color: '#fff' 将文本颜色设置为白色。要将文本颜色设为黑色，只需将值 #fff 更改为表示黑色的 CSS 颜色，例如 #000 或 black：

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

【讨论】：