reactjs - Hur man ändrar färgen på värdeattributet som visas i mitten av MUI Gauge-diagramkomponenten

Jag vill använda MUI X Charts mätare men med en anpassad färg för värdeattributet som visas i mitten. I det här fallet, 60 som visas i mitten av den tillhandahållna bilden.

Detta är källkoden för komponenten:

<Gauge width={100} height={100} value={60} />

Jag har försökt läsa igenom dokumentationen för att hitta ett specifikt attribut som styr det, men verkar inte kunna hitta det. Här är en länk till dokumentationen och en skärmdump av MUI-gaugkomponenten:

.

Svar #1

Enligt deras dokumentationsexempel kan du använda en selektor för att välja motsvarande element. Efter att ha inspekterat elementstrukturen kan du använda & .$ {gaugeClasses.valueText} text för att välja texten.

import * as React from 'react';
import { Gauge, gaugeClasses } from '@mui/x-charts/Gauge'; // <-- import gaugeClasses 

const settings = {
  width: 200,
  height: 200,
  value: 60,
};

export default function ArcDesign() {
  return (
    <Gauge
      {...settings}
      sx={(theme) => ({
        [`& .${gaugeClasses.valueText}`]: {
          fontSize: 40,
        },
        [`& .${gaugeClasses.valueText} text`]: {
          fill: "#3b82f6" // <-- change text color
        },
      })}
    />
  );
}