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

编程问答 2022-08-10

问题描述

我正在使用'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,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,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,243)'更改为白色，则文本框将变为白色，但文本也将变为白色，因此我看不到任何内容。那我该如何更改文本颜色？

解决方法

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

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