MUI饼图图例单行对齐及间距调整问题求助

要实现MUI饼图图例单行对齐并缩小间距，你需要针对legend配置项进行精准设置，之前的slotProps未生效大概率是因为放置位置错误，以下是具体解决方法：

1. 强制图例单行排列 #

在PieChart的legend属性中设置direction: 'row'，让图例横向排列：

<PieChart
  series={yourSeriesData}
  legend={{
    direction: 'row', // 核心：设置图例为单行布局
    // 其他图例配置
  }}
/>

2. 缩小图例项间距 #

通过legend.slotProps或直接用sx选择器覆盖默认样式，两种方式任选其一：

方式一：使用slotProps精准控制 #

将slotProps嵌套在legend对象内，分别调整容器间隙和图例项内边距：

<PieChart
  series={yourSeriesData}
  legend={{
    direction: 'row',
    slotProps: {
      // 控制图例容器的间隙（图例项之间的间距）
      container: {
        sx: {
          gap: '6px', // 替换为你需要的间距，默认是16px
        },
      },
      // 控制单个图例项的内边距
      item: {
        sx: {
          padding: 0, // 移除图例项默认内边距
          margin: '0 2px', // 微调外边距
        },
      },
    },
  }}
/>

方式二：直接覆盖默认CSS类 #

如果slotProps不生效，可通过sx直接定位图例相关类名强制修改：

<PieChart
  series={yourSeriesData}
  legend={{
    direction: 'row',
    sx: {
      // 调整图例项之间的间距
      '& .MuiChartsLegend-item': {
        margin: '0 4px',
        padding: 0,
      },
      // 可选：调整图例标记与文字的间距
      '& .MuiChartsLegend-mark': {
        marginRight: '3px',
      },
    },
  }}
/>

关键注意点 #

• 不要将legend的slotProps放在PieChart的根级slotProps中，必须嵌套在legend配置对象内才会生效。
• 如果使用自定义主题，也可以在主题中全局修改ChartsLegend的默认样式，避免重复配置。

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