Shadcn Chart标签与数值无间距，如何设置至少2px内边距？

图表提示框中部分较大数值与标签之间无内边距，需要设置至少2px的间距。

当前代码片段：

<ChartTooltip
  cursor={false}
  content={
    <ChartTooltipContent
      labelFormatter={(value) => {
        return new Date(value).toLocaleDateString("en-US", {
          month: "short",
          day: "numeric",
        });
      }}
      indicator="line"
    />
  }
/>

以下几种方式可实现需求：

• 通过组件props单独控制元素样式
  若使用的是Recharts库的ChartTooltipContent，可利用labelStyle和valueStyle分别给标签、数值设置内边距：

  <ChartTooltipContent
    labelFormatter={(value) => {
      return new Date(value).toLocaleDateString("en-US", {
        month: "short",
        day: "numeric",
      });
    }}
    indicator="line"
    labelStyle={{ paddingRight: '2px' }} // 给标签右侧加内边距
    valueStyle={{ paddingLeft: '2px' }} // 给数值左侧加内边距
  />
  

• 自定义提示框整体样式
  给ChartTooltipContent添加全局样式，调整整体内边距或元素间距：

  <ChartTooltipContent
    // 保留原有props
    style={{ padding: '4px 8px', gap: '2px' }}
  />
  

• 用CSS类精细化控制
  给组件添加自定义类名，再通过全局CSS定位元素设置样式：

  <ChartTooltipContent
    // 保留原有props
    className="custom-tooltip"
  />
  

  对应的CSS代码：

  .custom-tooltip .recharts-tooltip-label {
    padding-right: 2px;
  }
  .custom-tooltip .recharts-tooltip-item-value {
    padding-left: 2px;
  }
  

内容的提问来源于stack exchange，提问作者karlo292