【React】Material-UI 導入 〜 運用手順

Material-UIインストール

ターミナルの開発プロジェクト下で Material-UI の実装に必要なパッケージをインストールします

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

Material-UIインポート

Material-UI を使用したいファイル内で次をインポートします

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

関数を定義

import下に次の関数を定義する

const useStyles = makeStyles(() =>
    createStyles({
        // ここでスタイルをつける
    }),
);

スタイルをつけよう

ルールとして以下の点に注意しましょう
・クラス、Id はダブルクォーテーションで囲む
・プロパティはキャメルケースでかく

//省略

const useStyles = makeStyles(() =>
    createStyles({
        "hello": {
            color: '#AAAAAA',
            fontWeight: 'bold',
        }
    }),
);

const Hello = () => {

    const classes = useStyles(); // useStyles関数を定数に代入
    return(
        <h1 className={classes.hello}>Hello World</h1> // クラスを指定する時は定数名.クラス名
    );
}

//　省略

以上

Material-UI公式ページ
https://material-ui.com/