本記事では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指定
1つだけボタンを変えたいのであれば、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を使って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>
</>
)
}

このように、propsで管理するコードが色々な人が推奨しています。
まとめ:Material UI Buttonは使いこなせ

まとめ:Material UI Buttonは使いこなせ
ここまでで『【Material UI実践編】buttonコンポーネントでデザイン作成』について解説してきました。
- Materia UIのButtonコンポーネントは必須の知識
- Buttonはできることが多いので、その都度ググってみよう
- onClickを使うことが多い
本記事は以上です。
Material UIの便利な他の機能をたくさん知りたい方は下記の記事を参考にしてください。
