MaterialUI v5について最初に知るべき3つのこと

Material UIがバージョンアップし、v5がリリースされました。

コンポーネントの追加・変更などは言うまでもないですが、CSSを生成するためのスタイリングエンジンが変更になったこともあり、変更点は多いです。

多くの点が変わっているのものの、この記事ではまず最初に知っておくべきv5の基本だけをまとめました。

細かい変更内容が知りたい方はドキュメントを参照して下さい。

MUIへ名前が変わった

今まではMaterial UIでしたが、MUIへ名前が変わりました。

パッケージ名が変わっていることに注意して下さい。

yarn add @mui/material @emotion/react @emotion/styled

ドキュメントのURLもhttps://mui.com/へ変更されています。

makeStyles()からstyled()へ

v5ではスタイリングエンジンがemotionに変更されました。

v4まではmakeStyles()でCSSプロパティをカスタマイズするのが基本でしたが、styled()を使うのが基本になります。

こちらが基本的な使い方です。styledにラップするコンポーネントを渡しプロパティを設定していきます。

const MyComponent = styled('div')({
  color: 'darkslategray',
  backgroundColor: 'aliceblue',
  padding: 8,
  borderRadius: 4,
});

このコンポーネントをそのまま使えばいいので、makeStyles()と違ってconst classes = useStyles()を使ってclass名をコンポーネントに当てる、というやり方をしないでよくなりました。

themeにアクセスしたい場合は以下のように書きます。

import * as React from 'react';
import { styled, createTheme, ThemeProvider } from '@mui/system';

const customTheme = createTheme({
  palette: {
    primary: {
      main: '#1976d2',
      contrastText: 'white',
    },
  },
});

const MyThemeComponent = styled('div')(({ theme }) => ({
  color: theme.palette.primary.contrastText,
  backgroundColor: theme.palette.primary.main,
  padding: theme.spacing(1),
  borderRadius: theme.shape.borderRadius,
}));

export default function ThemeUsage() {
  return (
    <ThemeProvider theme={customTheme}>
      <MyThemeComponent>Styled div with theme</MyThemeComponent>
    </ThemeProvider>
  );
}

詳しくはこちらから

ちなみに@mui/stylesを使ってmakeStylesを使うことも出来ますが、非推奨です。

@mui/styles は MUI のレガシーなスタイリングソリューションです。スタイリングソリューションとしてJSSに依存していますが、@mui/materialでは使用されていないため、v5では非推奨となっています。emotionとJSSの両方をバンドルしたくない場合は、@mui/systemのドキュメントを参照することをお勧めします。

sxプロパティ

公式ドキュメントによく出てくるのがこのsxプロパティだと思います。

スタイルを簡単に(インライン形式のように)カスタマイズすることが出来ます。

<Box
  sx={{
    boxShadow: 1, // theme.shadows[1]
    color: 'primary.main', // theme.palette.primary.main
    m: 1, // margin: theme.spacing(1)
    p: {
      xs: 1, // [theme.breakpoints.up('xs')]: { padding: theme.spacing(1) }
    },
    zIndex: 'tooltip', // theme.zIndex.tooltip
  }}
>

theme変数へのアクセスもできます。

同様にCSSも指定できます。pseudo-selectorやmedia queryも指定できます。

<Box
  sx={{
    // some styles
    ":hover": {
      boxShadow: 6,
    },
  }}
>

styled APIを使う必要のないカスタマイズには、このようにしてsxプロパティを使うようです。

詳しくはこちらから。

なおsxプロパティを使う書き方は若干パフォーマンスが落ちるようですが、「それでも十分高速なので問題ない」とのことです。

まとめ

この記事ではMUIに移行する上で最初に知っておくべきことだけをまとめました。

記事の最初にちらっとだけ述べましたが、既存のコンポーネントにも変更がされていたり、レイアウトに使えるStackやデータ表示のためのコンポーネントなどいくつかの新たなコンポーネントも追加されています。

気になった方はドキュメントを見てみて下さい。