更改工具提示的样式 - recharts

Question

我为我的图表创建了一个自定义工具提示，我使用 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;
    }
  }
}

哪种样式属性可以帮助我实现它？

Answer 1

看起来 <p> 元素上定义了边距。

.recharts-tooltip-wrapper { .customTooltip { p { margin:0; } } }

更改工具提示的样式 - recharts

Change the styling of tooltip - recharts

css

reactjs

recharts