ひょんなことから急に（？）chakra-uiのCSSが適用されなくなってかなりハマったので残しておきます。
結論から言うと、chakra-ui自体を再インストールしたら治ったんですけど悔しいので経緯から話させてください。
再インストールのコマンドは下の方に書いてあります。
ディレクトリ構成を変えたらcssが効かなくなった
ことの経緯なのですが、まずNextjsをデフォルトで開始すると、 pages ディレクトリはプロジェクト直下にあると思います。
なのですが、色々調べているとsrc 配下にまとめたほうがいいみたいな記事をちらほら見かけます。
以前reactのプロジェクト作っていたときもsrc配下に色々とまとめていたのでこのnextjsのプロジェクトもそうしようと思ったのです。
・・・が、CSSが動かなくなりました。
ただなにかしらの設定ファイルをいじればいけるようになるだろうと思って色々とググってはみたものの全然解決はせず。
developertoolsで実際にどうなってるのか確認してみると、
colorの部分に、
gray.800
という形でchakyra-uiの書き方そのままが充てられていることに気づきました。
・・・まあだからといってなにかひらめいたわけでもないんですけど。
そしてさらに、
<Heading as="h1" fontSize={{ base: "md", md: "2xl" }}>
というふうに書いている部分があったんですけどここの、h1をh3に変えたりするとそこはきちんと変更されるんですよね。
まあだからといってなにかひらめいたわけでもないんですけど。
結論
chakra-uiを再インストールしたら直しました。
npm uninstall @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6 --save
してから、
npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6
することで事なきを得ました。
めでたしめでたし。
この問題でせっかく早起きして作業したのに1時間以上費やしてしまったorz