Кнопки панели инструментов Material-UI сворачиваются друг на друга на экранах меньшего размера - PullRequest
Новая
       28

Кнопки панели инструментов Material-UI сворачиваются друг на друга на экранах меньшего размера

1 голос
/ 15 января 2020

У меня есть этот Appbar компонент, и он прекрасно отрисовывается на широких экранах , см. Ниже:

enter image description here

Но на меньших экранах кнопки толпятся друг с другом, как показано ниже:

enter image description here

Даже попытка реагировать 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>
  );
}

1 Ответ

0 голосов
/ 02 февраля 2020

Это определенно 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, чтобы only появлялось на меньшем экране ,
  • Реализация выпадающего <list> (все, что вам нравится), который появляется как только это «меню» / значок щелкают / касаются на небольших экранах. Поместите кнопки, которые скрыты от панели приложений в эту <list>
...