MUI から shadcn/ui への移行

package.json からこの辺りを消す

    "@emotion/react": "^11.13.3",
    "@emotion/server": "^11.11.0",
    "@emotion/styled": "^11.13.0",
    "@mui/icons-material": "6.1.6",
    "@mui/lab": "6.0.0-beta.14",
    "@mui/material": "6.1.6",

15

shadcn 入れる

npx shadcn@latest init

15

Tailwind がないとか言われるので公式手順で入れる

15

import alias が設定されてないとか言われるので設定する

15

style を New York か Default か選ばされる
New York はコンパクトで影などで押せることが明示的？全体的に硬い印象を受ける。
Default はフラットで、ややゆとりがある。
MUI からの移行なので見た目が近い Default を使ってみる。

15

base color も選ばされる
MUI の blue grey を使っていたので、それに近い Slate にする
https://mui.com/material-ui/customization/color/
https://tailwindcss.com/docs/customizing-colors

15

Would you like to use CSS variables for theming?

使えないより使えたほうが良いだろうということでデフォルトの Yes

15

npx shadcn@latest add button

とか打つと src/components/ui/button.tsx にファイルが作成される。
めちゃくちゃ複雑なファイルができるけれども、これは基本的に触らない…？
shadcn のアップデートをして表示が変わったりしないように、ライブラリから import するのではなくファイルを作るのかしら。

15

MUI で使っていたファイルを消す

rm src/styles/theme.ts
rm src/styles/createEmotionCache.ts

15

CSS variables は no に変えた

15

あとは気合で MUI を使っているところを書き直すだけ