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

Question

我正在使用 '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)' 更改为白色，那么文本框会变成白色，但文本也是白色的，所以我看不到任何内容。那么如何更改文本颜色？

Answer 1

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

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

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

VerticalTimeline: change text color of first element

javascript

css

timeline

typescript

reactjs