Mantine使用時のトラブルと解決策

MantineコンポーネントのデフォルトのPropsを変更しようとして、
公式ドキュメントの Default Props
に書かれているように

export const theme = createTheme({
  ...
  components: {
    Button: Button.extend({
      defaultProps: {
        color: "cyan",
        variant: "outline",
      },
    }),
  },
});

などと設定しようとすると、

TypeError: ... Button.extend is not a function

のようにエラーになる。

サーバーサイドからButton.extend(...)を呼び出そうとしていることになるため。

https://help.mantine.dev/q/server-components#error-attempted-to-call-extend-from-the-server

ファイルの先頭に "use client"; を指定する。

"use client"; 
 
export const theme = createTheme({
  ...
  components: {
    Button: Button.extend({
      defaultProps: {
        color: "cyan",
        variant: "outline",
      },
    }),
  },
});

npm run dev で開発しているときには、
css modules で設定したスタイルが適用されるのに、
npm run build で static export したとき、一部設定したスタイルが適用されなくなってしまう。

Next.jsがファイルをバンドルするとき、cssファイルがバンドルされる順番を指定できない。
同じ詳細度の場合、後に書かれているものが優先されるが、
開発時はcss modules で作成したスタイル定義がMantineのスタイル定義のあとに来ていても、
バンドル時には作成したスタイル定義がMantineのスタイル定義の前に来てしまうことがある。
それが原因で開発時とstatic export したときで適用されるスタイルが異なってしまうことが発生してしまう。

Mantineはこの問題の対策としてレイヤー版のcssが用意されているので、
レイヤー版のcssを使えばこの問題を解決できる。

https://mantine.dev/styles/mantine-styles/#css-layers

Mantineのcssをimportするとき、レイヤー版のcssを使う

import "@mantine/core/styles.css";          
import "@mantine/core/styles.layer.css";    
 
// その他のcssファイルをimport

ただし、これだけだと resetスタイルを含んでいるtailwind css や normalize.css を使用している場合、
リセットスタイルがレイヤー版のMantineのスタイルを上書きしてしまいます。
Mantineのスタイルがリセットされないようにするには、
これらもレイヤーとしてimportする必要があります。

@layer normalize, mantine;
@import "path/to/normalize.css" layer(normalize);

// ファイルをimportする順番が大事、逆にするとnormalize.cssが優先される
import "./layered_normalize.css";
import "@mantine/core/styles.layer.css";
 
// その他のcssファイルをimport

Next.jsではなぜか @layer normalize, mantine;によるレイヤーの順番指定が機能しない ?
https://github.com/vercel/next.js/issues/55763