先日、Material-UI の新バージョン4.0がリリースされました。
Material-UI は React で最も人気があるUIコンポーネントライブラリです。
早速、個人的に気になる機能を試してみました。
主な情報源
気になる新機能
- レイアウトコンポーネント(Box/Container)が追加された
- Hook APIが追加された
- makeStylesで関数が使えるようになった
- Theme.spacingで関数が使えるようになった
- TextFieldのテーマ設定ができるようになった
レイアウトコンポーネント(Box/Container)が追加された
レイアウト用に２つのコンポーネントが追加されました。
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は省略して書ける
-
paddingはp、marginはm -
padding-topはpt -
padding-leftとpadding-rightはpx
-
-
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>
);
}
function Component() {
return (
<Box display="flex" justifyContent="space-between">
<Button>a</Button>
<Button>b</Button>
<Button>c</Button>
</Box>
);
}
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まではコンポーネント内でテーマ、スタイルを使用したい場合、それぞれwithTheme、withStylesを使う必要がありました。
いわゆる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で関数が使えるようになった
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で関数が使えるようになった
v3のテーマではspacing.unitに基本となる数値を１つだけ指定して、使用する場所でこれを倍にして使うという方法でした。
const theme = createMuiTheme({
spacing: {
unit: 4
}
});
v4からはspacingに関数を指定できるようになりました。
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からの移行ガイドは以下を参照してください。