Material UI App Bar按钮在较小的屏幕上彼此折叠

Question

我有一个在更宽的屏幕上看起来像这样的应用栏。

但是，当我查看它在较小的屏幕上的显示方式时，这些按钮会像这样彼此挤在一起

我尝试实施响应式排版，以查看是否可以解决问题。它没有。

所以，我认为当它进入较小的屏幕时，我需要实现一个抽屉。在代码中会是什么样？

这是我为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>

  );
}

Navbar.propTypes = {
  logout: PropTypes.func.isRequired,
  auth: PropTypes.object.isRequired
}

const mapStateToProps = state => ({
  auth: state.auth
})

export default connect(mapStateToProps, { logout })(Navbar)

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>