React(material-ui)カスタマイズ

Reactでチャットボット作ろう！
今回は以下のとらゼミさんの動画を参考にチャットボットを作成中。です！
現在はお問い合わせ内容をSlackに送るところまで出来ました。
非常にわかりやすく解説してくれるので、理解が深まります！

動画でもあるんですが、
今回は以下の内容を！

##Material-ui
Material-uiのカスタマイズ方法です！
Hook APIを使用してやります。

インストール

npm install --save @material-ui/styles

import

import {createStyles, makeStyles} from '@material-ui/core/styles'¥¥¥¥¥

関数定義

const useStyles = makeStyles(() => (
  createStyles({
    "button": {
      borderColor: '#FFB549',
      color: '#FFB549',
      fontWeight: 600,
      marginBottom: '8px',
      "&:hover": {
        backgroundColor: '#FFB549',
        color: '#fff'
      }
    }
  })
));

ここまで出来たら、以下のように。
useStylesをclassesに入れて、このように⇨className={classes.button}

const Answer = (props) => {
  const classes = useStyles();

  return (
      <Button
       className={classes.button}
       variant="outlined" onClick= {() => props.select(props.content,props.nextId)} 
      >
        {props.content}
      </Button>
  )
}

##感想

まだ作成途中ですが、
コンポーネントの設計がしっかり出来ているから、とてもコードが理解しやすいのだろうと
思うところです。私も何か作るときは自分なりに考えて設計を組み立てていきます！

今回は以上、ありがとうございました。