【React】material-ui で Toolbar の高さを低くしたいときは、minHeight を変更する

material-ui で Toolbar の高さを変更したい

こんにちは、@ndj です。
material-ui で Toolbar の高さを低くしたかったのですが、すこしハマったので、備忘録を残しておきます。

結論

1. Toolbar は min-height が決められている。
2. Toolbar の高さを変更するためには、min-height を変更する必要がある。

高さを変更する方法

1. Toolbar は min-height が決められている。

material-ui の Toolbar は、min-height が決められているそうです。

You need to change the min-height to adjust the height, as min-height is specified in material-ui.css as 64px.
stack overflow: How do I change the Material UI Toolbar height? Shiladitya氏の回答より

この方がおっしゃるには、Toolbar の min-height は 64px と決められているとのことなんですが、それを確認できる公式なドキュメントを見つけることができませんでした。。。material-ui のソースを確認すればいいのかな。。。

なにはともあれ、min-height が 64px ならば、いくら height をいじったところで　Toolbar の高さが 64px よりも低くならないのは納得です。

2. Toolbar の高さを変更するためには、min-height を変更する必要がある。

Toolbar の高さが変わらない理屈がなんとなくわかりました。
min-height を変更してやれば、Toolbar の高さを低くすることができそうです。

sample.js

import React from 'react';
import { makeStyles, AppBar, Toolbar } from '@material-ui/core';

const useStyles = makeStyles(
    {
        toolbar: {
            minHeight: `36px`, // minHeight を再設定する
        }
    }
);

const Sample = () => {
    const classes = useStyles();
    return (
        <AppBar position="static">
            <Toolbar className={classes.toolbar}>
            </Toolbar>
        </AppBar>
    );
}

export default Sample;

これで、Toolbar の高さを、64px より低くすることができました。

参考

stack overflow: How do I change the Material UI Toolbar height?

さいごに

ここまで読んでくださりありがとうございました。
誤字脱字、間違いご指摘などありましたらコメントいただけると幸いです。

twitter: ndj