时间戳

首页 > 解决方案 > VerticalTimeline：更改第一个元素的文本颜色

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

问题描述

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

标签： javascriptcssreactjstypescripttimeline

解决方案

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

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

推荐阅读