如何为MUI X BarChart图例文本设置字体样式（修改字号）

问题背景 #

我尝试为Material-UI x-charts的BarChart图例文本设置字体大小，文档提到：

由于该库依赖SVG进行渲染，您可以像自定义其他MUI组件一样通过CSS覆盖来定制它们。图表组件支持sx属性，您可以通过类名定位任何子组件。

但我尝试的所有自定义样式都被元素的内联样式覆盖，无法生效。

我试过两种方式：

• 创建带自定义样式的StyledBarChart：

import { styled } from '@mui/material/styles';
import { BarChart } from "@mui/x-charts/BarChart";

const StyledBarChart = styled(BarChart)(({ theme }) => ({
    theme,
    "& .MuiChartsLegend-series text": {
        fontSize: '0.8em',
    },
}));

export default StyledBarChart;

• 直接在BarChart组件上使用sx属性：

<BarChart
  sx={{ "& .MuiChartsLegend-series text": { fontSize: "0.8em" } }}
  dataset={...}
  series={[...]} 
  xAxis={...}
/>

最终生成的图例文本元素带有优先级更高的内联样式，覆盖了我的自定义设置：

<text 
  x="11"
  y="0"
  text-anchor="start"
  dominant-baseline="central"
  style="font-family:
    Montserrat, sans-serif;
    font-weight: 400;
    font-size:1rem;
    line-height: 1;
    color: inherit;
    fill: rgba(0, 0, 0, 0.87);"
  >
  <tspan x="11" dy="0px" dominant-baseline="central">My Legend Text Item</tspan>
</text>

可行解决方案 #

方法1：使用slotProps直接定制（推荐） #

MUI X Charts提供了slotProps属性，可以直接定位图例的文本元素，这种方式无需依赖CSS类名，优先级高于内联样式：

<BarChart
  dataset={...}
  series={[...]}
  xAxis={...}
  slotProps={{
    legend: {
      labelStyle: {
        fontSize: '0.8em'
      }
    }
  }}
/>

方法2：CSS强制覆盖（加!important） #

如果坚持用CSS选择器的方式，需要给样式添加!important来提升优先级，覆盖内联样式：

// 直接用sx属性
<BarChart
  sx={{ 
    "& .MuiChartsLegend-series text": { 
      fontSize: "0.8em !important" 
    } 
  }}
  dataset={...}
  series={[...]} 
  xAxis={...}
/>

// 或使用styled组件
const StyledBarChart = styled(BarChart)(({ theme }) => ({
    "& .MuiChartsLegend-series text": {
        fontSize: '0.8em !important',
    },
}));

方法3：全局主题配置 #

如果需要统一修改所有图表的图例字号，可以在MUI主题中全局配置：

import { createTheme, ThemeProvider } from '@mui/material/styles';

const theme = createTheme({
  components: {
    MuiChartsLegend: {
      styleOverrides: {
        series: {
          '& text': {
            fontSize: '0.8em !important'
          }
        }
      }
    }
  }
});

// 在根组件中包裹应用
<ThemeProvider theme={theme}>
  <BarChart {...props} />
</ThemeProvider>

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