如何修改MUI Gauge图表组件中心显示的value属性颜色

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

MUI X Gauge组件的中心数值默认使用类名MuiGauge-value，可以通过MUI的sx属性直接覆盖其样式：

<Gauge
  width={100}
  height={100}
  value={60}
  sx={{
    '& .MuiGauge-value': {
      fill: '#ff4444', // 设置自定义颜色
      // 可选：调整字号、字重等其他样式
      fontSize: '1.6rem',
      fontWeight: 700
    }
  }}
/>

方法2：自定义中心数值渲染（更灵活） #

使用Gauge组件的valueLabel属性，完全自定义中心内容的结构和样式，适合需要额外调整布局或添加内容的场景：

<Gauge
  width={100}
  height={100}
  value={60}
  valueLabel={({ value }) => (
    <text
      x="50%"
      y="50%"
      textAnchor="middle"
      dominantBaseline="middle"
      fill="#22aaee" // 自定义颜色
      fontSize="1.5rem"
      fontWeight="bold"
    >
      {value} {/* 可以在这里添加单位，比如{value}% */}
    </text>
  )}
/>

两种方法对比：

• 方法1快速简洁，适合仅修改颜色等基础样式的需求
• 方法2自由度更高，能自定义数值的显示形式、添加额外元素

内容的提问来源于stack exchange，提问作者MK_1.0