【Material UI実践編】buttonコンポーネントでデザイン作成

2022 8/14

2022年8月14日

本記事ではReactの作業フォルダ＋MaterialUIのインストールを終えた方を対象にしています。

2021年4月30日執筆

本記事は常に最新の情報を掲載しています

本記事の全体像

本記事では、Material-UI｜Buttonの基本的な使い方、実践での使い方などを紹介しています。

Material-UI Buttonとは

Material-UI Buttonでは、デザイン未経験でもカッコ良いデザインを構築することができます。

Googleが推奨しているMaterialデザインに準拠しつつ作成されているので、安心してご利用ください。

記事の内容

Material UI｜buttonの基本的な使い方

Material UI｜buttonの基本的な使い方

当サイトで多く使用する使い方は下記の通りです。

colorの変更
linkを追加
onclickを追加

buttonのcolorを変更する方法

buttonの色を変更する方法は色々ありますが、本記事では2つ紹介します。

style指定
class指定

１つだけボタンを変えたいのであれば、styleが手早いですが、全体的に変える場合はclass指定をおすすめします

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

export default function App() {
  return (
    <>
    <Button style={{color:'white', backgroundColor: 'red'}}>当サイト</Button>
    </>
  )
}

//class指定

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

const useStyles = makeStyles ({
  main_button: {
    backgroundColor: 'red',
  }
});

export default function App() {
  const classes = useStyles();
  return (
    <>
    <Button variant="contained" className={classes.main_button}>当サイト</Button>
    </>
  )
}

どちらも同じように思えますが、class指定の場合だと、後に色を変えたい時に、一箇所だけの修正ですみますが、sytleだとbuttonの数だけ修正するしかないので、大きいサイトを運営するのであれば、class指定がおすすめです。

buttonにlinkを追加する方法

linkを追加するのは簡単です。

<Button variant="contained" className={classes.main_button} href="https://onityanzyuku.com/">当サイト</Button>

hrefを追加するだけでlinkを作成できます。

buttonにonclickを追加する方法

onclickの追加方法は普段のReactと同じです。

<Button variant="contained" className={classes.main_button} onClick={() => alert('クリックできてるよ!!')}>当サイト</Button>

Reactと同じように使用できます。

【実践編】React×Material UI Buttonの使い方

当サイトが実際に使ってみて実践でも使えると思ったものだけを追加していきます。

props

実践編は徐々に増えていきます。

propsを使ってButtonコンポーネントを管理

まずはフォルダ構成を下記のようにしてください。

create-react-appで作成したファイルに追加で「components/Button.jsx」を追加してください。

Reactではcomponentsフォルダ内で部品を管理するのが当たり前になりつつあります。

//App.js
import React from 'react';
import Button_Main from './components/Button';

export default function App() {
  return(
    <>
    <Button_Main 
    shape="contained" 
    color="primary" 
    content="当サイト"
    />
    </>
  )
}

実際にコードをコピーして貼り付けてみてください。

//Button.jsx

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

export default function Button_Main(props) {
  return(
    <>
    <Button 
    variant={props.shape} 
    color={props.color}
    >
      {props.content}
    </Button>
    </>
  )
}