How to style two different set of texts in MUI X gauge component

const currCal = 10;
const percentageCal = 10;

return (
        <div>
          <Gauge
            value={percentageCal}
            width={250}
            height={250}
            startAngle={0}
            endAngle={360}
            innerRadius="95%"
            outerRadius="100%"
            valueMin={0}
            sx={{
              [`& .${gaugeClasses.valueText}`]: {
                fontSize: 30,
                transform: "translate(0px, 0px)",
              },
            }}
            text={() => {
              return `${currCal} \n calories`;
            }}
          />
        </div>
      );

I am trying to style the Gauge component such that I have currCal have a font size of 30 but "calories" have a smaller font size of 20. Is there a way to do this? I've tried using Typography component but it doesn't work because I think text requires a string.

Does anyone have an idea of how to do this? Thank you!

In your case, if we inspect the DOM, we can see 2 tspan elements thanks to the \n in the text. We can use the selectors of these elements to make a work-around solution like this:

sx={{
  [`& .${gaugeClasses.valueText}`]: {
    fontSize: 30,
    transform: 'translate(0px, 0px)',
    '& tspan:last-of-type': {
      fontSize: 20,
    },
  },
}}

You can take a look at this StackBlitz for a live working example.