MantineのcreateTheme

みんな大好きMantine UI
もちろん僕も大好きです。今回はそのMantine UIのレイアウトを上手に上書きする方法について備忘録的にまとめます。
Mantine UIの環境構築については公式のページが一番わかりやすいので、そちらを参照してください。

MantineUI

colorsを上書きする

Mantine UI - Colors

Mantine UIにはデフォルトで非常にいい感じの配色が設定されています。リンクでよく使われがちな水色はc="blueでいいですし、teal, grayなどなどこの色よく見るなーという色は大体そろっています。
個人開発ではとっても楽ですが、実務で使うとなるそうもいきません。
なので@mantine/coreからcreateThemeをimportして、上書きしちゃいましょう

colorsに設定した色の前後合計10色を指定して、命名。
あとはprimaryColorに命名した色を設定すればMantine UIがデフォルトでその色味をいい感じに使用してくれます。

import { createTheme } from '@mantine/core'

export const theme = createTheme({
  primaryColor: 'primary',
  colors: {
    primary: [
      "#e0fbff",
      "#cbf2ff",
      "#9ae2ff",
      "#64d2ff",
      "#3cc5fe",
      "#23bcfe",
      "#09b8ff",
      "#00a1e4",
      "#0090cd",
      "#007cb5"
    ]
    secondary: [
      "#f3edff",
      "#e0d7fa",
      "#beabf0",
      "#9a7ce6",
      "#7c56de",
      "#683dd9",
      "#5f2fd8",
      "#4f23c0",
      "#451eac",
      "#3a1899"
    ]
  },
})

例えば上記のように設定すれば、Buttonコンポーネントを使用する際にvariantを変えるだけでfilledやoutlineなど統一された色味で表示を変えることができるようになります。
さらに言えばc={{colors.primary}}やc={{colors.secondary.1}}で設定した色味の濃淡を含めて設定できるようになります。

注意点として、Mantine UIのcolorsは必ず10色以上設定しないといけません。
10色設定したうえで、その5番め（上記であればprimaryの”#3cc5fe”)がデフォルトの値になるようなので、覚えておきましょう。
面倒であれば一番の友達ChatGPTを使用してもいいですし、Mantine UIにはMantine colors generatorがありますから、それを使用してもいいでしょう。

componentを上書きする

colorsができたら次はcomponentです。
先のcolorsを上書きしていたらcomponentsの配色もかなりいい感じになりますが、細かい部分はある程度自分で調整する必要があります。
page.tsxに@matine/coreからimportしたコンポーネントに直書きでstylesを設定してもいいですが、コードの見通しも悪くなりますし、特別そのページにしかないデザインでない限りはtheme.tsにまとめたいです。

なので今回はAccordionコンポーネントを例に挙げ、スタイルをtheme.tsで上書きしてみましょう。

FAQなどで使われるAccordionにはAccordion.PanelとAccordion.Controlの間にborderが設定されることがよくあります。

export const theme = createTheme({
  /* Put your mantine theme override here */
  components: {
    Accordion: {
      styles: {
        control: {
          fontSize: '10px',
          borderBottom: '1px solid red',
        },
        item: {
          fontSize: '10px',
          borderBottom: 'unset',
        },
      },
    },
  },
})

上記のようにcomponentsからAccordionを設定し、stylesを反映したい部分にCSSプロパティを設定することで、themeを設定しているMantineProviderの子コンポーネントでは常に上書きされたレイアウトでコンポーネントが表示されるようになります。

componentsごとにどのようなPropsが書かれているのかはタブを切り替えることで簡単に確認できるようになっています。
ドキュメントが豊富で見やすいところもMantine UIの良いところですね

Accordion Props

【おまけ】ほかのプロパティも上書きしちゃう

Mantine UIではxs, sm, md, lg, xlといったtailwindでは同じみの文字列にデフォルトで値が設定されています。
もちろんこれも上書きすることで、任意の値にすることができます。

import { createTheme } from '@mantine/core'

export const theme = createTheme({
  spacing: {
    sm: '8px',
    md: '16px',
    lg: '24px',
  },
  radius: {
    sm: '6px',
    md: '10px',
    lg: '14px',
  },
  shadows: {
    sm: '0 0px 2px rgba(0, 0, 0, 0.25)',
    md: '0 0px 4px rgba(0, 0, 0, 0.25)',
    lg: '0 0px 8px rgba(0, 0, 0, 0.25)',
  },
  fontSizes: {
    xs: '12px',
    sm: '14px',
    md: '16px',
    lg: '18px',
    xl: '24px',
  },
})

さいごに

Mantine UI本当に使いやすいです。

環境構築も簡単、themeの上書きも簡単、
何より@mantine/hooksや@mantine/formがあまりにも使いやすく、フロント開発に不可欠な要素のほとんどを補填してくれるので、名に使うか迷ったらノータイムでMantine UI選んじゃってよいのではないでしょうか。

Chakra UIやMUIに比べ、ネットに情報は少ないですが、別に困らないくらいドキュメントが見やすく使いやすいです。

何より名前がかわいいのがいい。

この記事がMantine UI使ってみようかな......と迷っているフロントデベロッパの皆様の背中を少しでも押せることを祈っています。

Mantine UI でcreateThemeを上手に使うためのメモ

MantineのcreateTheme

colorsを上書きする

componentを上書きする

【おまけ】ほかのプロパティも上書きしちゃう

さいごに