import { MuiPickersUtilsProvider } from "@material-ui/pickers";
import DayjsUtils from "@date-io/dayjs";

import Root from "./Root";

function App() {
  return (
    <MuiPickersUtilsProvider utils={DayjsUtils}>
      <Root />
    </MuiPickersUtilsProvider>
  );
}

あとは、<DatePicker>や<DateTimePicker>といった用意されているコンポーネントを利用するだけです。

dayjs用の設定をしておいたので、valueにDayjsオブジェクトが使えたり、onChangeのdataがDayjsオブジェクトとして返ってきます。

type Props = {
  value: Dayjs;
  handleChange: (date: Dayjs) => void;
};
export const MyDateTimePicker: React.FC<Props> = ({ value, handleChange }) => (
  <KeyboardDateTimePicker
    variant="inline"
    ampm={false}
    value={value}
    onChange={(date) => {
      if (date) {
        handleChange(date);
      }
    }}
    format="YYYY/MM/DD HH:mm"
  />
);

スタイル

Material-UIには、core/stylesからmakeStylesというAPIが提供されており、CSS-in-JSスタイルでスタイリングをしていきます。

@material-ui/styles - Material-UI

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';

const useStyles = makeStyles({
  root: {
    color: 'white',
    height: 48,
    padding: '0 30px',
  },
});

export default function MyButton() {
  const classes = useStyles();
  return <Button className={classes.root}>Hook</Button>;
}

また、CssBaselineというnormalize.cssに似た役割を持ったコンポーネントが用意されているので、アプリケーションのトップレベルで読み込むようにしました。

SSR(Next.js)

Next.jsで開発している際、「Prop className did not match」というエラーが出ます。 SSRとクライアントサイドでclassNameが変わってしまうので、_app.tsxに以下の記事で紹介されているような対応をしました。

github.com qiita.com

Theme

Material-UIで用意されているコンポーネントは色がprimaryやdefault、secondaryといった形で指定します。

ここで適用される色はデフォルトのThemeです。

Default Theme - Material-UI

アプリケーションのデザインに合うように、Themeをカスタマイズしました。ThemeProviderを設定します。

material-ui.com

Themeの例

import { createMuiTheme } from "@material-ui/core/styles";
import blue from "@material-ui/core/colors/blue";
import red from "@material-ui/core/colors/red";

const theme = createMuiTheme({
  palette: {
    primary: {
      main: blue["600"],
    },
    secondary: {
      main: red["600"],
    },
  },
  typography: {
    h1: {
      fontWeight: 600,
    },
    h2: {
      fontWeight: 600,
    },
    button: {
      fontWeight: 600,
    },
  },
});

export default theme;

日本語だと、h要素でも細字になってしまったので、h要素のfontWeightを高く設定することも可能です。

toshi-toma blog

主にフロントエンド、作業ログあとは色々なメモ ✍️ 🍅

Material-UIを使った開発

Material-UI

パッケージ

情報

コンポーネント

Components

Component API

よく使うコンポーネント

アイコン

その他

DateTimePicker(日時)

スタイル

SSR(Next.js)

Theme