ReactJS 和 material-ui 未在移动设备上呈现页面的全宽

Question

我正在尝试找出可能导致此问题的原因。没有进一步描述，我宁愿附上一些屏幕截图，以便您可以看到问题。第一个屏幕是桌面视图，第二个屏幕是移动视图，因此您可以比较这两者。

这里是上层菜单源代码，也许你会看到是什么导致了这个问题。

import React, {useState, useEffect} from 'react';
import PropTypes from 'prop-types';
import { makeStyles, ThemeProvider } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import Typography from '@material-ui/core/Typography';
import Box from '@material-ui/core/Box';
import TextField from '@material-ui/core/TextField';
import { Link } from "react-router-dom";
import { createMuiTheme } from '@material-ui/core/styles';
import {useLocation} from 'react-router-dom'
import HomeIcon from '@material-ui/icons/Home'
import MenuBookIcon from '@material-ui/icons/MenuBook'
import PeopleIcon from '@material-ui/icons/People'

const theme = createMuiTheme({
    palette: {
        primary: {
            light: '#5472d3',
            main: '#0d47a1',
            dark: '#002171',
            contrastText: '#fff',
        },
        secondary: {
            light: '#efefef',
            main: '#bdbdbd',
            dark: '#8d8d8d',
            contrastText: '#000',
        },
    },
});

function TabPanel(props) {
    const { children, value, index, ...other } = props;

    return (
        <div
            role="tabpanel"
            hidden={value !== index}
            id={`simple-tabpanel-${index}`}
            aria-labelledby={`simple-tab-${index}`}
            {...other}
        >
            {value === index && (
                <Box p={3}>
                    <Typography>{children}</Typography>
                </Box>
            )}
        </div>
    );
}

TabPanel.propTypes = {
    children: PropTypes.node,
    index: PropTypes.any.isRequired,
    value: PropTypes.any.isRequired,
};

function a11yProps(index) {
    return {
        id: `simple-tab-${index}`,
        'aria-controls': `simple-tabpanel-${index}`,
    };
}

const useStyles = makeStyles((theme) => ({
    root: {
        flexGrow: 1,
        backgroundColor: theme.palette.background.paper
    }
}));

export default function UpperMenu(props) {
    const classes = useStyles();
    const [value, setValue] = React.useState(0);

    const location = useLocation();
    //const currentLocation = location.pathname;

    const handleChange = (event, newValue) => {
        setValue(newValue);
    };

    return (
        <div className={classes.root}>
            <ThemeProvider theme={theme}>
                <AppBar position="static" >
                    <Tabs value={value} onChange={handleChange} aria-label="Menu">
                        <Tab label={<HomeIcon />} component={Link} to={'/'} />
                        <Tab label={<MenuBookIcon />} component={Link} to={'/knihy'} {...a11yProps(1)} />
                        <Tab label={<PeopleIcon />} component={Link} to={'/login'} />
                    </Tabs>
                </AppBar>
            </ThemeProvider>
            <TabPanel value={value} index={1}>
                <TextField id="outlined-basic" label="Meno knihy" variant="outlined" />
            </TabPanel>
        </div>
    );
}