おにちゃん塾の商品一覧

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

【Material UI実践編】buttonコンポーネントでデザイン作成
URLをコピーする
URLをコピーしました!

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


2021年4月30日執筆

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


本記事の全体像

おにちゃん

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

現時点で、僕自身は実践経験があまりないので、そこまで濃い実践編を紹介できませんが、徐々に追加していく予定です。


Material-UI Buttonとは

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

おにちゃん

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

目次

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

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の使い方

【実践編】React×Material UI Buttonの使い方
【実践編】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>
    </>
  )
}

このように、propsで管理するコードが色々な人が推奨しています。


まとめ:Material UI Buttonは使いこなせ

まとめ:Material UI Buttonは使いこなせ

まとめ:Material UI Buttonは使いこなせ

ここまでで【Material UI実践編】buttonコンポーネントでデザイン作成について解説してきました。

本記事の内容
  • Materia UIのButtonコンポーネントは必須の知識
  • Buttonはできることが多いので、その都度ググってみよう
  • onClickを使うことが多い
おにちゃん

本記事は以上です。

Material UIの便利な他の機能をたくさん知りたい方は下記の記事を参考にしてください。

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

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!
目次
閉じる