如何为MUI-X BarChart的BarLabel设置字体大小样式

我想给React MUI-X BarChart中通过barLabel="value"显示在条形内部的标签调整字体大小，参考代码如下：

//for reference --> import { BarChart } from "@mui/x-charts/BarChart"

<BarChart
  width={width}
  margin={{ top: 10, right: 30, bottom: 22, left: 40 }}
  height={height}
  series={[{ data: data, id: "uvId" }]}
  layout="horizontal"
  leftAxis={{
    disableTicks: true,
    tickLabelStyle: {
      fontSize: 8,
    },
  }}
  bottomAxis={{
    tickLabelStyle: {
      fontSize: 8,
    },
  }}
  yAxis={[
    {
      valueFormatter: (value) => `${value.slice(0, 5)}..`,
      data: labels,
      scaleType: "band",
      colorMap: {
        type: "ordinal",
        colors: ["#B8CDE0", "#A9ADB4"],
      },
    },
  ]}
  barLabel="value"
/>

我尝试给barLabel传函数返回带样式的HTML，但它只接受返回字符串：

barLabel={(item, context) => {
  // 不支持HTML --> <span style="font-size:5px;">{item.value}</span>
  return `${item.value}`
}}

另外，给条形的类加样式对标签也无效，请问有解决办法吗？

解决办法 #

方法1：通过Series配置自定义标签样式 #

直接在series数组的配置项中添加label对象，这里可以直接设置标签的字体大小、颜色、位置等样式，替代原有的barLabel属性：

<BarChart
  width={width}
  margin={{ top: 10, right: 30, bottom: 22, left: 40 }}
  height={height}
  series={[{
    data: data,
    id: "uvId",
    label: {
      content: (item) => item.value, // 对应原barLabel="value"的效果
      style: {
        fontSize: 12, // 自定义字体大小
        fill: "#ffffff", // 可选：设置文字颜色，避免与条形底色冲突
        fontWeight: 500 // 可选：添加字体粗细
      },
      position: "middle" // 标签位置：可选top/bottom/middle
    }
  }]}
  layout="horizontal"
  leftAxis={{
    disableTicks: true,
    tickLabelStyle: {
      fontSize: 8,
    },
  }}
  bottomAxis={{
    tickLabelStyle: {
      fontSize: 8,
    },
  }}
  yAxis={[
    {
      valueFormatter: (value) => `${value.slice(0, 5)}..`,
      data: labels,
      scaleType: "band",
      colorMap: {
        type: "ordinal",
        colors: ["#B8CDE0", "#A9ADB4"],
      },
    },
  ]}
  // 移除原有的barLabel="value"
/>

方法2：通过CSS类覆盖样式 #

MUI-X生成的条形标签会带有MuiBarChart-label类名，你可以通过CSS直接修改该类的样式：

/* 全局样式 */
.MuiBarChart-label {
  font-size: 10px !important;
}

/* 局部作用域样式（如使用CSS Modules） */
.chartContainer .MuiBarChart-label {
  font-size: 10px;
}

如果使用styled-components封装组件：

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

const StyledBarChart = styled(BarChart)`
  .MuiBarChart-label {
    font-size: 10px;
  }
`;

// 使用时
<StyledBarChart
  // 你的配置项
/>

注意点 #

• 不要同时使用barLabel属性和series中的label配置，优先选择series的label配置以获得更灵活的样式控制
• 若CSS覆盖遇到优先级问题，可使用!important或更具体的选择器提升优先级

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