mantine乗り換えメモ

terrierscript

HStack -> Group

terrierscript

Providerとthemeとcss importを一緒にまとめておくと便利そう

terrierscript

theme

components: {
    Popover: {
      defaultProps: {
        radius: "md",
     }
  }
}

みたいにしてデフォルトのコンポーネント設定

terrierscript

modal
- https://mantine.dev/core/modal/
- withCloseButton / titleがあるので簡素化はする
- アニメーション変更はtransitionProps
  - popがchakraのそれに近そう

terrierscript

primaryColor: dark が一番近い感じ

terrierscript

Button
- round: md
- as -> component

terrierscript

https://mantine.dev/core/transition/
Function Childrenになる。
細かいところ色々chakraより劣後する

terrierscript

https://mantine.dev/guides/next/#setup-with-app-router
mantineHtmlProps

terrierscript

Spinner -> Loader
- https://mantine.dev/core/loader/

terrierscript

<w> [webpack.cache.PackFileCacheStrategy] Serializing big strings (143kiB) impacts deserialization performance (consider using Buffer instead and decode when needed)

https://mantine.dev/guides/next/#app-router-tree-shaking
tree shaking

terrierscript

細かいstyle property

https://mantine.dev/styles/style-props/
position -> pos

terrierscript

rounded=full -> radius=xl