ReactでMaterial-UIを利用する方法についてまとめます。

本記事の大部分はMaterial-UIコンポーネントのスタイルのカスタマイズ方法についての説明となっており、
特にHook APIを利用したカスタマイズ方法を中心に説明を行います。
※簡単にですがHook API以外の方法についてもMaterial-UIのスタイル変更方法で触れています。

公式サイト

インストール

$ npm install --save @material-ui/core @material-ui/icons @material-ui/system

利用方法

公式サイトにコンポーネントごとのサンプルがまとめられているので、利用したいコンポーネントに近いもののサンプルコードを流用しましょう。
例：https://material-ui.com/components/buttons/#contained-buttons

Material-UIのスタイルをカスタマイズする

Material-UIのスタイル変更方法

① Hook API
Material-UIのサンプルコードと同じ

import { makeStyles, createStyles } from '@material-ui/core/styles';

const useStyles = makeStyles((theme: Theme) => createStyles({
  root: {
    backgroundColor: theme.color.red,
  },
}));

export default function MyComponent {
  const classes = useStyles();
  return <div className={classes.root} />;
}

② Styled component API
コンポーネントの"シンタックス"に直接スタイルを適用
コンポーネントとスタイルを直接紐づける

import React from 'react';
import styled from 'styled-components';
import Button from '@material-ui/core/Button';

const StyledButton = styled(Button)`
  background-color: #6772e5;
  color: #fff;
  box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
  padding: 7px 14px;
  &:hover {
    background-color: #5469d4;
  }
`;

export default function StyledComponents() {
  return (
    <div>
      <Button>Default</Button>
      <StyledButton>Customized</StyledButton>
    </div>
  );
}

③ Higher-order component API
スタイルを当てたコンポーネントを返すコンポーネント

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

const styles = {
  root: {
    backgroundColor: 'red',
  },
};

function MyComponent(props) {
  return <div className={props.classes.root} />;
}

export default withStyles(styles)(MyComponent);

ピュアなCSSクラスでのスタイル変更ではダメなのか？

ピュアなCSSクラスでもスタイル変更は可能であるが、Material-UIコンポーネントはHTML構造が複雑になっているものが多く存在し、意図通りにCSSを適用するのが難しかったり、あるいは変更できない場合がある。
Hook APIやStyled component APIを利用することでピュアなCSSクラスでは変更できないスタイルを調整したり、変更を簡単に記述することができる。

Hook APIの使い方

① インストール

$ npm install --save @material-ui/styles

② import

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

③ 関数定義

const useStyles = makeStyles(() =>
  createStyles({
    "root": {
      padding: 0
    }
  })
);

記述ルール

json形式
キャメルケース
数値はそのまま
クォーテーションで文字列を囲む

const useStyles = makeStyles(() => (
    createStyles({
        "button": {
            borderColor: "#FFB549",
            color: "#FFB549",
            fontWeight: 600,
            marginBottom: "8px",
            "&:hover": {
                backgroundColor: "#FFB549",
                color: "#fff"
            }
        }
    })
));

適用方法

コンポーネント内で宣言
オブジェクト型として使える

const MyButton = (props) => {
    const classes = useStyles();
    return (
        <Button
            className={classes.button}
        >
            {props.content}
        </Button>
    );
};

Material-UIの利用方法