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

【问题标题】：Material-UI AppBar buttons collapse into each other on smaller screensMaterial-UI AppBar 按钮在较小的屏幕上相互折叠
【发布时间】：2020-01-15 17:33:31
【问题描述】：

我有这个 Appbar 组件，它在宽屏上呈现良好，见下文：

但在较小的屏幕上，按钮会像下面这样挤在一起：

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

这是我的 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>
  );
}

【问题讨论】：

标签： javascript reactjs material-ui jss

【解决方案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 中的按钮放入此 @987654327 @

【讨论】：