React Chakra-uiでRadioのラベルフォントサイズを自由に変えるには？

Chakra uiの提供する<Radio>にはラジオボタンの選択肢のフォントサイズを変えるプロパティ: sizeがあります。
しかし、これにはsm, md, lgの３つの選択肢しかありません。

つまり、ラジオボタンの選択肢のサイズをこれ以上大きくしたいときに、これらは選択肢として不十分となります。

sizeでサイズ調節する例

sizeでサイズ調節する例として、一部分を切り出してみました。

sizeでラジオボタンのフォントサイズを指定する例

  const Radios = formChoices.map((choice, index) => (
    <Radio
      size='lg'
      value={(index + 1).toString()}
      key={choice}
    >
      {choice}
    </Radio>
  ))

これに対して、さまざまな方法でstyleを上書きしてフォントサイズを変える試みをしてみた次第であります。
しかし、変わらなかったり、変わっちゃいけない部分のサイズが変わったり、苦戦しました。

<Radio>のfontSizeを指定しても、思うように変えることはできませんでした。

1時間ほど格闘した後、最終的に原始的な方法で解決できました。

解決策

<Radio>タグで囲むテキストを、なんらかの要素でラップして、その要素にスタイルを適用する。

具体的には、以下のように<Text>で囲ってみて、そのプロパティでフォントサイズを指定することにしました。

Radioの子要素をラップして、そこでフォントサイズを指定

  const Radios = formChoices.map((choice, index) => (
    <Radio
      size='lg'
      value={(index + 1).toString()}
      key={choice}
    >
      <Text fontSize='2xl'>{choice}</Text>
    </Radio>
  ))

今回の事例からの学び

<Radio>などのフォームコンポーネントの役割は、あくまでラジオボタンのデザインや機能としてのものであるということです。言い換えれば、ラベルなどの、ラジオボタン自体とは違うレイヤーを指定するには、ラベルテキストの部分を<Text>などの部品にラップして、そこでスタイルの調節を試みるべきである、ということです。

ここを<div>や<p>タグなどとして、生のHTMLと混ぜて、それらで個別にスタイルを指定しても理論上動くはずですが、レスポンシブデザインなどを考えると、Chakra-uiのビルトインの<Text>を使う方がいいかもしれません。---ここについてはどうなんでしょう。コメントで教えていただけると今後の参考になります。

お読みいただきありがとうございました。それでは、良い１日を！