React初心者が試行錯誤しながらサイト作ってみた（その1）

つまずいた部分のメモ

Material-UIはどうやってスタイル変えるの！？

パッと(これが原因で後でエラーが...)調べたところmakeStylesとwithStylesが出てきた

今回はmakeStylesを使うことにしました．

makeStyles が使えない事件!!

早速使って見たら以下のエラーが，，，

Header.js

const useStyles = makeStyles({
  title: {
    flexGrow: 1,
  },
});
export default class Header extends.React.Component() {
  render (){
    const classes = useStyles();//Error
    return (...);
  }
}

ちゃんと公式サイトで調べたらmakeStylesはフックAPIだということが判明! <-- ちゃんと調べろ自分
というわけで関数コンポーネントに変更したらできました．

Header.js

const useStyles = makeStyles({
  title: {
    flexGrow: 1,
  },
});
export default function Header() {
  const classes = useStyles();//OK
  return (...);
}

---

その他のスタイル変更

Header.js

//style={{...: ...}}で各種変更可
<AppBar style={{ background: '#d1c4e9' }}>//AppBarの背景の色変更
<MenuIcon style={{ color: purple[800]}}>//MenuIconの色変更
//makeStylesを実際に適用
const useStyles = makeStyles({
  title: {
    flexGrow: 1,
  },
});
export default function Header() {
  const classes = useStyles();
  return (
     <Typography variant="h6" className={classes.title}>//適用
       Title
     </Typography>
  );
}

次はTeitterとGithubのアイコン表示や，メニューボタン押したら一覧が出てくる機能を追加してみます．