如何使包含网格的内容UI头与带有断点的移动屏幕响应

Question

我已经制作了标题组件与网格有路由链接，我只是希望这个网格是响应在移动屏幕上应用的材料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

请检查附加的叉子演示。如上所述，基于显示断点，一个框总是可见的，而另一个框是可见的。

​

​