如何在MUI LineChart中为轴线与刻度标签添加间距？

当前图表效果 #

期望实现的效果 #

已尝试操作 #

我尝试定位以下MUI类来添加间距：

如图所示，我希望在轴线与刻度标签之间增加间距，尝试使用sx属性及多个类，但样式始终未生效：

环境信息 #

使用的MUI版本为^6.4.5，查阅官方文档后未找到清晰的图表样式配置说明，特此求助。

解决方案 #

针对MUI X图表（v6.x版本），调整轴线与刻度标签间距可通过以下方式实现：

1. 直接配置轴的tickLabelStyle
   在X轴/Y轴组件中，通过tickLabelStyle设置间距，无需额外类名：

   <XAxis
     tickLabelStyle={{
       marginLeft: 8, // X轴标签与轴线的水平间距
       // Y轴可使用 marginTop/marginBottom 调整垂直间距
     }}
   />
   

2. 用sx属性强制覆盖样式
   若内联样式优先级不足，可通过深度选择器配合!important覆盖默认样式：

   <LineChart
     data={yourData}
     sx={{
       '& .MuiChartsAxis-tickLabel': {
         marginLeft: '8px !important',
         // 针对Y轴替换为 marginTop: '8px !important'
       },
     }}
   >
     {/* 其他图表组件配置 */}
   </LineChart>
   

3. 配合tickSize调整视觉间距
   增大刻度线长度（tickSize），可间接优化标签与轴线的视觉距离：

   <XAxis tickSize={10} />
   

注：若MuiChartsAxis-tickLabel不生效，可通过浏览器开发者工具确认实际类名后调整选择器。

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