我为使用图表实现的图表创建了自定义工具提示。我想更改其样式,但无法删除行之间的多余空格。我尝试更改行高,内边距和边距,这会删除空间,但没有任何效果。
<div className='customTooltip'>
<h2 className='tooltipLabel'>{e.payload[0].payload.initiatorUsername}</h2>
<i className='tooltipTitle'>{e.payload[0].payload.title}</i>
<div className='tooltipContent'>
<p>Request startTime:</p>
<p>Approver name:</p>
<p>Approver Title</p>
<p>Approved Time: {moment.unix(e.payload[0].payload.time).format('MMM Do YYYY, h:mm:ss')}</p>
</div>
</div>
.recharts-tooltip-wrapper {
.customTooltip {
margin: 0;
line-height: 5px;
border: 1px solid #f5f5f5;
background-color: rgba(255, 255, 255, 255);
padding-bottom: 0%;
.tooltipTitle {
margin: -10px;
color: #666;
top:5px;
}
}
}
哪种样式属性可以帮助我实现它?
答案 0 :(得分:1)
好像在<p>
元素上定义了边距。
.recharts-tooltip-wrapper {
.customTooltip {
p {
margin:0;
}
}
}