更改工具提示的样式 - recharts
Change the styling of tooltip - recharts
我为我的图表创建了一个自定义工具提示,我使用 recharts 实现了它。我想更改它的样式,但无法删除行间多余的白色space。我尝试更改行高、填充和边距以删除 space 但没有任何效果。
<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;
}
}
}
哪种样式 属性 可以帮助我实现它?
看起来 <p>
元素上定义了边距。
.recharts-tooltip-wrapper {
.customTooltip {
p {
margin:0;
}
}
}
我为我的图表创建了一个自定义工具提示,我使用 recharts 实现了它。我想更改它的样式,但无法删除行间多余的白色space。我尝试更改行高、填充和边距以删除 space 但没有任何效果。
<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;
}
}
}
哪种样式 属性 可以帮助我实现它?
看起来 <p>
元素上定义了边距。
.recharts-tooltip-wrapper {
.customTooltip {
p {
margin:0;
}
}
}