css - 更改工具提示的样式 - recharts

Question

我为我的图表创建了一个自定义工具提示，我使用 recharts 实现了它。我想更改它的样式，但无法删除行之间多余的空格。我尝试更改行高、填充和边距以删除空间，但没有任何效果。

<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;
    }
  }
}