React Material UI入門１ - masalibの日記

Google先生みたいなログイン画面が作りたかった。それには「Material UI」を使えばいいので Material UIについて勉強しました

Material UIとは

GoogleのMaterialデザインをベースに開発された、UIコンポーネントライブラリです。 Google先生のサイトを使った事ある人ならすぐに受け入れてくるのがいい点です。

インストール

npm install @material-ui/core

google先生みたいなメニューをつくるためにはcore以外に

npm install @material-ui/cons
npm install @material-ui/styles
npm install @material-ui/utils

をインストールした方がいいです。

一番簡単な使い方

単純なボタンのコンポーネントを指定することで作成しています

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

const App = () => {
return (
  <Button variant="contained" color="primary">
    Test
  </Button>
  );
}
export default App;

結果は以下のURLから確認できます

https://csb-kez4f.vercel.app/StyleBase

何も指定していない場合は primaryは#2196f3のblue、 secondaryは#f50057のpinkになります

その他のColorには red,pink,purple,deepPurple,indigo,blue,lightBlue,cyan,teal,green,lightGreen,lime,yellow,amber,orange,deepOrange,brown,grey,blueGrey があります。

詳しくは本家を確認してください

material-ui.com

ちなみに color="primary" をcolor="red"で色が変わらないので注意

細かい色指定をする場合はcreateMuiThemeで設定します。

makeStylesで指定する方式（簡易）

@material-ui/core/stylesの中にあるmakeStylesを使って指定する方式です

  import React from 'react';
  import { makeStyles } from '@material-ui/core/styles';
  import Button from '@material-ui/core/Button';
  　
  const useStyles = makeStyles({
    button: {
      backgroundColor: 'green'
    }
  });  　
  const MaterialUIHooks = () => {
    const classes = useStyles();
    return (
      <Button variant="contained" className={classes.button}>
        Test
      </Button>
    );
  }