javascript - Material-UI AppBar 按钮在较小的屏幕上相互折叠

Question

我有这个Appbar组件，它在宽屏幕上渲染得很好，见下文:

但在较小的屏幕上，按钮彼此拥挤，如下所示:

即使尝试响应式排版也没有解决我的问题。
所以，我认为我需要为较小的屏幕实现一个抽屉。
代码中会是什么样子？

这是我的AppBar代码:

import React from 'react';

import { makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import { connect } from 'react-redux'
import PropTypes from 'prop-types'
import { logout } from '../../actions/auth'


const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1,
  },
  title: {
    flexGrow: 1,
  },
  appbar: {
    height: 0
  }
}));

const Navbar = ({auth: { isAuthenticated, loading }, logout}) => {
  const classes = useStyles();

  return (   
      <AppBar position="relative" >
        <Toolbar>
          <Typography variant="h6" className={classes.title} noWrap>Goal Book</Typography>
          <Button href="/goals" color="inherit">Goals</Button>
          <Button href="/profiles" color="inherit">Profiles</Button>
          <Button href="/dashboard" color="inherit">Dashboard</Button>
          <Button href="/" color="inherit" onClick={logout}>Logout</Button>
        </Toolbar>
      </AppBar>
  );
}

Answer 1

这绝对是CSS ，在本例中JSS问题。
仔细观察您的样式，并有效地利用断点。

// For wider screens
const useStyles = makeStyles(theme => ({
  // ...
  // declare a class, 
  // and attach it to all your AppBar buttons (with React/JSX/html)
  appButton: {
    [theme.breakpoints.down('sm')]: { display: 'none', }
  },
  // declare another class, 
  // and attach it to a major button/icon that should appear on smaller screens
  // create a dropdown list that is actived by this menu button/icon (React/JSX/html)
  appMenu: {
    [theme.breakpoints.up('sm')]: { display: 'none', }
  },
});

这就是我们上面所做的:

• 制作所有这些 <button>元素在较小的屏幕上消失，
• 创建一个“菜单”按钮或 icon 仅出现在较小的屏幕上，
• 实现下拉列表 <list> (无论您喜欢什么)，一旦在较小的屏幕上单击/触摸“菜单”/图标，就会出现。
  将从 AppBar 隐藏的按钮放入此 <list> 中。