material-uiでAppBarを上部に固定する

const useStyles = (theme: Theme) => {
    return makeStyles({
        root: {
            flexGrow: 1
        },
        flex: {
            flex:1
        },
        menuButton: {
            marginLeft: -12,
            marginRight:20
        }
    })
}

positionをfixedにします。

const MyApp = () => {
    const theme = useTheme()
    const styles = useStyles(theme)()
    return (<div className={styles.root}>
        <AppBar position="fixed">
            <Toolbar>
                <IconButton className={styles.menuButton}
                    color="inherit"
                    aria-label="Menu">
		  <MenuIcon></MenuIcon>
                </IconButton>
                <Typography variant="h1" color="inherit" className={styles.flex}>
                    Title
                </Typography>
                <Button color="inherit">Login</Button>
            </Toolbar>
        </AppBar>
        <ul>
            {new Array(500).fill(null).map ((v, i) => (
                <li key={i}>{i}</li>
            ))}
        </ul>

    </div>);
}

export default MyApp

しかし、このままではコンテンツがAppbarに隠れてしまうので

const useStyles = (theme: Theme) => {
    return makeStyles({
        root: {
            flexGrow: 1
        },
        flex: {
            flex:1
        },
        menuButton: {
            marginLeft: -12,
            marginRight:20
        },
        toolbarMargin:theme.mixins.toolbar
    })
}

とtheme.mixins.toolbarを設定し、

const MyApp = () => {
    const theme = useTheme()
    const styles = useStyles(theme)()
    return (<div className={styles.root}>
        <AppBar position="fixed">
            <Toolbar>
                <IconButton className={styles.menuButton}
                    color="inherit"
                    aria-label="Menu">
		<MenuIcon></MenuIcon>
                </IconButton>
                <Typography variant="h1" color="inherit" className={styles.flex}>
                    Title
                </Typography>
                <Button color="inherit">Login</Button>
            </Toolbar>
        </AppBar>
        <div className={styles.toolbarMargin}/>
        <ul>
            {new Array(500).fill(null).map ((v, i) => (
                <li key={i}>{i}</li>
            ))}
            </ul>

    </div>);
}

export default MyApp

のようにdiv要素に指定します。