如何使包含网格的 Material UI header 响应带有断点的移动屏幕

Question

我制作了带有网格的 header 组件，其中包含用于路由的链接，我只是希望通过应用 material UI 断点，此网格在移动屏幕上响应。意味着不是通过将它们包裹在下面来显示所有网格项目，而是在移动屏幕上显示 2 个项目。谢谢
**这是我的 header.js 文件代码：**

import React from 'react'
import './Header.css'

import Grid from '@mui/material/Grid';
import Button from '@mui/material/Button';
import { AppBar } from '@mui/material';
import SportsEsportsIcon from '@mui/icons-material/SportsEsports';
import StorefrontIcon from '@mui/icons-material/Storefront';
import GamepadIcon from '@mui/icons-material/Gamepad';
import ChildCareIcon from '@mui/icons-material/ChildCare';
import AcUnitIcon from '@mui/icons-material/AcUnit';
import { useNavigate } from 'react-router-dom';
import { makeStyles } from '@material-ui/core';
const useStyles = makeStyles((theme)=>({
root:{
    [theme.breakpoints.down('sm')]: {
        
      }
}
}))

export const Header = () => {
    const classes =useStyles()
    const navigate = useNavigate()
    return (
        // <div className='header'>
        <div>
            {/* <div className='plomxName'>PlomX</div> */}
            {/* <Box sx={{ flexGrow: 1 }}> */}
            <AppBar style={{ background: 'black', height: '109px' }}>

                    <Grid container justifyContent="center" spacing={2} className={classes.root}>
                        <div className='plomxName'><Button onClick={() => navigate('/')} sx={{ color: "white" }}>PlomX</Button></div>
                        <Grid item sx={{ marginTop: 3 }}><Button onClick={() => navigate('/games')} sx={{ color: "white" }}><SportsEsportsIcon sx={{ color: 'white' }} />Games</Button></Grid>
                        <Grid item sx={{ marginTop: 3 }}><Button onClick={() => navigate('/nftmarketplace')} sx={{ color: "white" }}><StorefrontIcon sx={{ color: 'white' }} />NFT Marketplace</Button></Grid>
                        <Grid item sx={{ marginTop: 3 }}><Button onClick={() => navigate('/metaverse')} sx={{ color: "white" }}><AcUnitIcon sx={{ color: 'white' }} />MetaVerse</Button></Grid>
                        <Grid item sx={{ marginTop: 3 }}><Button onClick={() => navigate('/getyourgameon')} sx={{ color: "white" }}><GamepadIcon sx={{ color: 'white' }} />Get your game on Blockchain</Button></Grid>
                        <Grid item sx={{ marginTop: 3 }}><Button onClick={() => navigate('/careers')} sx={{ color: "white" }}><ChildCareIcon sx={{ color: 'white' }} />Careers</Button></Grid>
                    </Grid>

            </AppBar>
            {/* </Box> */}
        </div>
    )
}

我想做的实际设计是这样的

Answer 1

请查看随附的分叉演示。如前所述，一个框始终可见，而另一个框基于显示断点可见

如何使包含网格的 Material UI header 响应带有断点的移动屏幕

How can I make the Material UI header containing Grid Responsive to mobile screen with breakpoints

responsive-design

reactjs

material-ui

react-material