Mantineでradiusを一括変更する方法

環境

• Mantine 5.5.0

やりたいこと

Mantineではデフォルトのradius(丸み)はsmに設定されている。

こんな感じ

ちなみに最小のxsだとこんな感じ

個人的にはあんまり丸みのあるデザインは好きじゃないのでxsに変更しているのだが、毎回

<Button radius="xs">
  ログイン
</Button>

と記述するわけにはいかない。そこでやり方をメモ

方法1

コンポーネント別にradiusを設定する方法

MantineProviderでコンポーネントごとにデフォルトのpropsを設定できる。

<MantineProvider
  theme={{
    components: {
      Button: {
        defaultProps: {
          radius: 'xs'
        }
      }
    }
  }}
>
...
</MantineProvider>

こうすることで全ボタンのradiusはデフォルトxsになる。

方法２

defaultRadiusを使う方法。いちいちコンポーネントごとに設定していられない、一括で変更したい場合はこっち

<MantineProvider
  theme={{
    defaultRadius: 'xs',
  }}
>
...
</MantineProvider>

これは若干公式ドキュメントが悪くて、Theme objectのページに記載されている。

蛇足

完全に丸みを消して角張ったデザインにしたい場合はpropsの値を「0」にすればおｋ。

これはradiusがMantineNumberSize型で定義されており、xs〜xlのいずれかまたは数値を許可しているため0で完全無効にできるってわけ