📑

MUI Theme 基本操作

2023/10/10に公開

React

mui

tech

背景

業務で MUI の Theme について振れたので、色々纏めていく

Theme とは

デフォルトで適用されているスタイルを自由にカスタマイズできるものです。

以下が例である。typography をfontSize: 19 と設定することで ThemeProvider 配下ではこのtypographyがフォントサイズで表示されるようになる。このように要素全体のスタイルを変更するときに扱うものである。

import * as React from 'react';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import Typography from '@mui/material/Typography';

const theme = createTheme({
  typography: {
    fontSize: 19,
  },
});

export default function FontSizeTheme() {
  return (
    <ThemeProvider theme={theme}>
      <Typography>body1</Typography>
    </ThemeProvider>
  );
}

Theme のカスタマイズ

ここからは Theme の基本的な操作をいくつか紹介していきます。

Palette

Paletteはコンポーネントの色を変更することができます。

const theme = createTheme({
  palette: {
    primary: lime,
    secondary: purple,
  },
});

Spacing

margin や padding の幅を変えることができます。MUI ではデフォルトが 1 = 8pxで設定されています。

const theme = createTheme({
  spacing: 4,
});

theme.spacing(2); // `${4 * 2}px` = '8px'

Components

テーマ内でコンポーネントを使用して、コンポーネントのスタイルなどをカスタマイズできます。以下はコンポーネントの基本的なカスタマイズになります

DefoultProps

MUI コンポーネントには各プロパティのデフォルト値があり、その値に設定されている値を元にスタイルが適用されます。

以下のように Button コンポーネントの defaultProps を変更することでデフォルトで ``color: "error"` が設定されるようになります。

const theme = createTheme({
  components: {
    MuiButton: {
      defaultProps: {
        color: "error"
      }
    }
  }
});

Style overrides

MUI で適用された DOM 要素のスタイルを変更するためのものです。defoultProps は元々設定されているデフォルト値の変更に対しては style overrides はある要素を指定してスタイルを変更にしている。以下の例を見ると、Button コンポーネントの root 要素の color を赤に変えている。

const theme = createTheme({
  components: {
    MuiButton: {
      styleOverrides: {
        root: {
          color: 'red',
        },
      },
    },
  },
});

Variant

条件に合わせて個別にスタイルを設定していく。例えば、スマホであれば variant="sp" pcであれば variant="pc"など使い分ける。

const theme = createTheme({
  components: {
    MuiButton: {
      variants: [
        {
          props: { variant: 'pc' },
          style: {
            textTransform: 'none',
            border: `2px dashed ${blue[500]}`,
          },
        },
        {
          props: { variant: 'sp', color: 'secondary' },
          style: {
            border: `4px dashed ${red[500]}`,
          },
        },
      ],
    },
  },
});

BreakPint

画面サイズによって適用するスタイルを健康することができます。

const styles = (theme) => ({
  root: {
    padding: theme.spacing(1),
    [theme.breakpoints.down('md')]: {
      backgroundColor: theme.palette.secondary.main,
    },
    [theme.breakpoints.up('md')]: {
      backgroundColor: theme.palette.primary.main,
    },
    [theme.breakpoints.up('lg')]: {
      backgroundColor: green[500],
    },
  },
});

背景