Mantine v7 alphaを触ってみる #フロントエンド

以前の記事でMantineの内部実装をみる必要があったので、リポジトリを覗きに行った時、ついでにv7のリポジトリを見つけました。
アップデート内容を見てみたら気になる内容だったので、理解ついでに触ってみました。

アップデートで気になる点

Emotionの利用をやめる

昨今のCSS-in-JSの問題を受けての対応かと思います。
すべてネイティブCSSに変更となるので、内部的に大きなアップデートになることがわかるかと思います。

CSS-in-JSに問題については、こちらの記事をご参考に。

Headless UIとして利用できるようになる

最近よく目にするようになったHeadless UI。
個人的には、利用したいコンポーネントが多くてMantineを選んだ経緯があるので、今後Mantineが注目されるきっかけになりそうです。
Headless UIとして利用する方法は簡単で、後ほど解説します。

Headless UIの詳細については、こちらの記事をご参考に。

normalize.cssを含めない

そこまでレイアウトに影響のあるものではないと思いますが、ちらほら気になるところが出てくるかもしれません。

一応、v6の方のリンクも

試してみる

今回はVite Templateを利用します。
masterブランチがv6になっているので、ブランチはv7を指定します。

git clone -b v7 https://github.com/mantinedev/vite-template.git mantine-v7

※6/15時点の最新は7.0.0-aplha.13ですが、v7用のtemplateでは7.0.0-aplha.11が利用されています。コンポーネント数が多少増えた程度なので、今回は気にせず7.0.0-aplha.11のまま進めます。

起動してみると下記の様な画面が表示されます。

Emotionについて

package.jsonを見ても、Emotionを利用していないことが確認できます。

一応、v6の方のリンクも

Headless UIについて

You can now use Mantine as a headless library. To do that, just do not import @mantine/*/styles.css in your application. Then you will be able to apply styles with Styles API.

上記の通り、styles.cssをimportしなければ、Headless UIとして利用できます。

App.tsx

- import '@mantine/core/styles.css';
import { MantineProvider } from '@mantine/core';
import { Router } from './Router';
import { theme } from './theme';

export default function App() {
  return (
    <MantineProvider theme={theme}>
      <Router />
    </MantineProvider>
  );
}

styles.cssを読み込まないと下記の様な画面になります。

最後にTailwind CSSを利用してStyleをあててみます。

yarn add tailwindcss --dev
npx tailwindcss init -p

postcss.config.jsはすでにtemplateに含まれているので、tailwind.config.jsのみ生成されます。
それぞれを下記の様に修正します。

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
-  content: [],
+  content: [
+    './index.html',
+    './src/**/*.{js,ts,jsx,tsx}',
+  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

postcss.config.js

module.exports = {
  plugins: {
+    tailwindcss: {},
    'postcss-preset-mantine': {},
    'postcss-simple-vars': {
      variables: {
        'mantine-breakpoint-xs': '36em',
        'mantine-breakpoint-sm': '48em',
        'mantine-breakpoint-md': '62em',
        'mantine-breakpoint-lg': '75em',
        'mantine-breakpoint-xl': '88em',
      },
    },
  },
};

また、index.cssを新規作成して、App.tsx内で読み込めばTailwind CSSのクラスが利用できるようになります。

index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

App.tsx

+ import './index.css';
import { MantineProvider } from '@mantine/core';
import { Router } from './Router';
import { theme } from './theme';

export default function App() {
  return (
    <MantineProvider theme={theme}>
      <Router />
    </MantineProvider>
  );
}

簡単ではありますが、実際にStyleが適用されるか試してみます。

Button.module.css

.button {
  @apply p-1 bg-gray-300 rounded-md;
}

ColorSchemeToggle.tsx

import { Button, Group, useMantineColorScheme } from '@mantine/core';
import classes from './Button.module.css';

export function ColorSchemeToggle() {
  const { setColorScheme } = useMantineColorScheme();

  return (
    <Group className="flex justify-center gap-2">
      <Button
        className={classes.button}
        onClick={() => setColorScheme('light')}
      >
        Light
      </Button>
      <Button className="p-1 bg-black rounded-md text-white" onClick={() => setColorScheme('dark')}>Dark</Button>
      <Button onClick={() => setColorScheme('auto')}>Auto</Button>
    </Group>
  );
}

Styleが適用されていることが確認できました。

v6の時はTailwind CSSを読み込んだ時、Styleが競合してしまい利用するために設定がややこしかったのが、苦労せず利用できるようになりました。

v7に向けて準備できること

こちらのchangelogを読んで修正対応箇所をキャッチアップしておきましょう。
参考までに、個人的に多用していて修正しないといけない箇所を挙げておきます。

Emotionを利用しなくなるため、sx propが廃止。v7ではstyle propへ変更。
Groupコンポーネントのposition propがjustify propへ変更になり、値も変更。
TabコンポーネントのonTabChange propがonChange propへ変更。

まとめ

v7へのバージョンアップにより、Mantineを利用しているアプリケーションでも大幅な変更が発生しそうということが分かりました。
現状、coreパッケージの移植が6割程度という感じで、まだまだ先になりそうですがアップデートを楽しみにしています。

最後に

GoQSystemでは一緒に働いてくれる仲間を募集中です！

ご興味がある方は以下リンクよりご確認ください。