Как стилизовать два разных набора текстов в компоненте датчика MUI X

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>
      );

Я пытаюсь стилизовать компонент Gauge так, чтобы у меня currCal имел размер шрифта 30, а «калории» имели меньший размер шрифта — 20. Есть ли способ сделать это? Я пробовал использовать компонент «Типография», но он не работает, потому что я думаю, что для текста требуется строка.

Есть ли у кого-нибудь идеи, как это сделать? Спасибо!