本記事では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の便利な他の機能をたくさん知りたい方は下記の記事を参考にしてください。



