【React】一括で装飾を整えるMantine Providerの使い方

Mantineを使うとさまざまな装飾を施すことができるのですが、コンポーネント一つ一つに対して装飾をしていたのでは記述量が多くなり、管理が複雑になります。

そこで登場するのがMantine Providerです。

Mantine Providerを使用することで、一度の記述で全てのコンポーネントに対して、同じ装飾をすることができます。

また一箇所変更すると全て変更することができるので、変更の管理が非常に簡単になります。

必要に応じて、一部だけ装飾を変えるとうことも可能です。

今回の記事では、Mantine Providerの使い方を紹介します。

前回の記事で紹介した。ボタン用コンポーネントを例に記事で紹介しますので、未読の方はこちらもぜひ参考にしていただけると幸いです。

【React】Mantineからコピーしたコンポーネントを編集する

Mantine Providerの使い方

Mantine Providerを使うには、importして、<MantineProvider> タグで装飾する箇所を挟み、タグの中に装飾内容を記述します。

Mantine Providerを導入する。

まずは、Mantine Providerをimportぃましょう。

index.tsxをテキストエディタで開いて、次の一文を１行目に追加してください。

前回の記事から作成されている方は、DemoButtonとMantineProviderの２つがimportされている状態です。

import { MantineProvider } from '@mantine/core'
import DemoButton from '../components/button'

また、すでにMantine/coreからimportしているものがある場合は、同じ{}の中にMantineProviderを追加すればOKです。

次にMantineProviderをreturn内に記述します。

前回の記事では、DemoButtonを記述していましたので、このボタンに対してMantineProviderで装飾してみましょう。

こちらが前回のコードです。

return(
       <ButtonCopy></ButtonCopy>
)

この<ButtonCopy></ButtonCopy>を<MantineProvider>で挟むことで準備が完了します。
ですが、その後いろいろと設定を追加することになるので、まずは下記のURLからMantineProvider用のコードをコピーアンドペーストしましょう。

https://mantine.dev/theming/mantine-provider/
Styles on MantineProvider以下のコードをコピーしてreturn内にコピペします。

  return (
    <MantineProvider
      theme={{
        components: {
          Button: {
            // Subscribe to theme and component params
            styles: (theme, params: ButtonStylesParams) => ({
              root: {
                height: 42,
                padding: '0 30px',
                backgroundColor:
                  params.variant === 'filled'
                    ? theme.colors[params.color || theme.primaryColor][9]
                    : undefined,
              },
            }),
          },

          Badge: {
            // Use raw styles object if you do not need theme dependency
            styles: {
              root: { borderWidth: 2 },
            },
          },
        },
      }}
    >
      <Button variant="outline">Outline button</Button>
      <Button variant="filled" color="cyan">Filled button</Button>
      <Badge variant="dot">Dot badge</Badge>
    </MantineProvider>
  );

この状態でページがどのように表示されているかを確認してみましょう。
今の状態だと、importされていないライブラリがあってエラーが出ているので、一旦importにButton, Badge, ButtonStylesParamsを追加しましょう。

import { MantineProvider, Button, Badge, ButtonStylesParams } from '@mantine/core';

追加が完了したらlocalhostにアクセスします。

コードをコピーしたページのサンプルと同じく、ボタンが二つとデバッグのバーが表示されていればOKです。

では、ここにDemoButtonを追加します。

以下の箇所を書き換えてコンポーネントを追加することで、追加されたコンポーネントにMantineProviderの設定が反映されます。

      <Button variant="outline">Outline button</Button>
      <Button variant="filled" color="cyan">Filled button</Button>
      <Badge variant="dot">Dot badge</Badge>

上記の３行を削除してDemoButtonに置き換えてみましょう。

  return (
    <MantineProvider
      theme={{
        components: {
          Button: {
            // Subscribe to theme and component params
            styles: (theme, params: ButtonStylesParams) => ({
              root: {
                height: 42,
                padding: '0 30px',
                backgroundColor:
                  params.variant === 'filled'
                    ? theme.colors[params.color || theme.primaryColor][9]
                    : undefined,
              },
            }),
          },

          Badge: {
            // Use raw styles object if you do not need theme dependency
            styles: {
              root: { borderWidth: 2 },
            },
          },
        },
      }}
    >
      <DemoButton></DemoButton>
    </MantineProvider>
  );

これでDemoButtonコンポーネントに装飾が反映されます。

ローカルホストにアクセスしてボタンが一つだけ表示されていることを確認しましょう。

以上で、MantineProviderの導入は完了です。

MantineProviderを編集する。

次にMantineProviderを編集して、装飾を変更してみましょう。

コピーしたコードのうち、ボタンの装飾に関連しているのは以下の箇所になります。

          Button: {
            // Subscribe to theme and component params
            styles: (theme, params: ButtonStylesParams) => ({
              root: {
                height: 42,
                padding: '0 30px',
                backgroundColor:
                  params.variant === 'filled'
                    ? theme.colors[params.color || theme.primaryColor][9]
                    : undefined,
              },
            }),
          },

この部分を編集することでボタンの装飾を変更することができます。

まずはheightやpaddingの数字の部分を変更してみましょう。

heightの数字を変えるとボタンの高さが変わります。
paddingは余白の設定です。
0は上部、30pxは右側の余白です。下と左にも余白を追加する場合は、’0 30px 10px 30px’　というように4つの数字を追加してください。反映される値の順番は左から順に上｜右｜下｜左です。

paddingLeft: 20　や　paddingRight: 20　などを使用しても同じく余白を設定することができます。

この他にサイズや色、フォントなどを変更するにはここに設定項目を追加します。

試しにrootの中身を以下のように編集してみましょう。

              root: {
                height: 50,
                padding: '0 100px 0 200px',
                fontFamily: 'Roboto',
                color: 'blue',
                backgroundColor:
                  params.variant === 'filled'
                    ? theme.colors[params.color || theme.primaryColor][9]
                    : undefined,
              },

この変更でボタンの文字色とフォント、文字の配置が変更されました。

このようにしてボタン以外にもすべての装飾をMantineProviderに追加することで、共通の設定とすることができます。

設定できる項目については、紹介しきれないほどたくさんありますので、Mantineの公式ドキュメントを参考にするか、CSSのドキュメントを参考にしていただくと良いかと思います。

https://developer.mozilla.org/ja/docs/Web/CSS　（CSSドキュメント）

MantineProviderで一括装飾する

最後に一括で装飾をする方法です。

一括で装飾をするには装飾したいコンポーネントを<MantineProvider>タグで全て挟むだけでOKです。

<DemoButton>の場合を例にすると、以下のように記述すれば全てのDemoButtonコンポーネントに対して装飾が反映されます。

  return (
    <MantineProvider
      theme={{
        components: {
          Button: {
            // Subscribe to theme and component params
            styles: (theme, params: ButtonStylesParams) => ({
              root: {
                height: 42,
                padding: '0 30px',
                backgroundColor:
                  params.variant === 'filled'
                    ? theme.colors[params.color || theme.primaryColor][9]
                    : undefined,
              },
            }),
          },

          Badge: {
            // Use raw styles object if you do not need theme dependency
            styles: {
              root: { borderWidth: 2 },
            },
          },
        },
      }}
    >
      <DemoButton></DemoButton>
      <DemoButton></DemoButton>
      <DemoButton></DemoButton>
    </MantineProvider>
  );

装飾が施されているボタンが3つ表示されます。

<DemoButton>タグのところを他のコンポーネントに置き換えて、<MantineProvider>タグ内にコンポーネントごとの設定を追加すれば一括で装飾することができます。

まとめ

• Mantine Providerを使用するためにまずimportする。
• return()内に<MantineProvider>タグを記述する。
• 装飾したいコンポーネントをタグで挟む。
• <MantineProvider>タグの中に装飾内容を記述する。
• 装飾したいコンポーネントを全て<ManitieProvider>タグで挟むことで一括装飾が可能