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

2021 5/29

URLをコピーする

URLをコピーしました！

本記事では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>
    </>
  )
}