Help us understand the problem. What is going on with this article?

【Material-UI】v4で追加された気になる新機能

More than 1 year has passed since last update.

先日、Material-UI の新バージョン4.0がリリースされました。
Material-UI は React で最も人気があるUIコンポーネントライブラリです。

早速、個人的に気になる機能を試してみました。

主な情報源

気になる新機能

レイアウトコンポーネント(Box/Container)が追加された

レイアウト用に2つのコンポーネントが追加されました。

Box

https://material-ui.com/components/box/

他のコンポーネントをラップしてスタイルを適用するためのコンポーネントです。
BoxコンポーネントはプロパティでCSSスタイルを指定できます。

function Component() {
    return (
        <Box m={2} p={1} color="palette.primary">
            <div></div>
        </Box>
    );
}
  • プロパティの一覧 https://material-ui.com/system/api/
  • paddingとmarginは省略して書ける
    • paddingpmarginm
    • padding-toppt
    • padding-leftpadding-rightpx
  • p={1}1pxではなくtheme.spacing(1)の意味(theme.spacingについては後述)

v3まではレイアウト目的で<div>を使うことがありましたが、これからは<Box>に直接プロパティでスタイルを指定できるようになります。

中央寄せ
function Component() {
    return (
        <Box textAlign="center">
            <Button>a</Button>
            <Button>b</Button>
            <Button>c</Button>
        </Box>
    );
}
flex-box
function Component() {
    return (
        <Box display="flex" justifyContent="space-between">
            <Button>a</Button>
            <Button>b</Button>
            <Button>c</Button>
        </Box>
    );
}

Container

https://material-ui.com/components/container/

コンテンツを中央寄せするためのコンポーネントです。

最近のWebページではコンテンツを中央寄せで表示するのが一般的なので、地味に便利なコンポーネントです。

Hook APIが追加された

https://material-ui.com/styles/basics/#hook-api
https://material-ui.com/styles/advanced/#accessing-the-theme-in-a-component

v3まではコンポーネント内でテーマ、スタイルを使用したい場合、それぞれwithThemewithStylesを使う必要がありました。
いわゆるHOCというやつです。

v4からは上記に加えて Hook API も使えるようになりました。

テーマの使用
import {useTheme} from "@material-ui/core/styles";

function MyComponent() {
    const theme = useTheme();
    return <span color={theme.palette.primary.main}>primary color</span>
}
スタイルの使用
import {makeStyles} from "@material-ui/core/styles";

const useStyles = makeStyles({
  myButton: {
    borderWidth: 4,
  },
});

const MyComponent = () => {
  const classes = useStyles();
  return (
    <Button className={classes.myButton}>a</Button>
  );
};

TypeScriptを使っているとHOCスタイルだと型指定が結構面倒なのですが、Hook API だと簡単に書けるようになります。
ただしwithStylesに関してはコンポーネントを使用する側でスタイルを上書きする用途もあるので使い分けが必要になります。

makeStylesで関数が使えるようになった

https://material-ui.com/styles/basics/#adapting-based-on-props

makeStylesではスタイルの値を設定する関数を使用できます。

import {makeStyles, Theme} from "@material-ui/core/styles";

type Props = {
  color: string;
};

const useStyles = makeStyles<Theme, Props>({
  root: ({ color }) => ({
    backgroundColor: color
  })
});

function ColorButton(props: Props) {
  const classes = useStyles(props);
  return <Button className={classes.root}>{props.color}</Button>;
}

Theme.spacingで関数が使えるようになった

https://material-ui.com/customization/spacing/

v3のテーマではspacing.unitに基本となる数値を1つだけ指定して、使用する場所でこれを倍にして使うという方法でした。

v3
const theme = createMuiTheme({
    spacing: {
        unit: 4
    }
});

v4からはspacingに関数を指定できるようになりました。

v4
import { Spacing } from "@material-ui/core/styles/createSpacing";

const theme = createMuiTheme({
    spacing: (factor => 4 ** factor) as Spacing;
});

const Component = () => <box p={1}>padding 4px</box>;
const Component = () => <box p={2}>padding 16px</box>;

TextFieldのテーマ設定ができるようになった

MUIのテーマでは各コンポーネントのデフォルトプロパティとスタイルを指定することができます。
しかしv3まではTextFieldだけはデフォルトを指定することができませんでした。

v4からはTextFieldもデフォルト指定できるようになりました。

const theme = createMuiTheme({
    defaults: {
        MuiTextField: {
            variant: "outlined",
        },
    },
});

最後に

ここに記載した内容はあくまで個人的に気になる機能のみです。
他の新機能や変更点は公式ドキュメントを参照してください。

また、v3からの移行ガイドは以下を参照してください。

Migration From v3 to v4 - Material-UI

tag1216
Qiita戦闘力はキュイレベルです! /作ったもの ◆QiiTrend:https://qiitrend.herokuapp.com/ ◆Qiiner:https://qiiner.tag1216.net/ ◆Qiitaでいいねしたら草生えるページ:https://qiiner.tag1216.net/likes-heatmap
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away