材质 Ui 抽屉在构建时损坏

Question

我正在使用带有 react 的材料 ui，但我一想部署我的网站就遇到了问题。 我认为什么问题是由于某种原因没有在构建时分配类名我试图放弃使用 的 clsx pkg 但还是同样的问题，我不知道是否有其他原因，但我没有找到任何有同样问题的人

开发版------------构建版

appBar + 抽屉组件

export const NavBar = (props) => {
  const classes = useStyles()
  const theme = useTheme()
  const [open, setOpen] = useState(false)
  // const [, setAnchorEl] = useState(null)

  const handleDrawerOpen = () => {
    setOpen(true)
  }

  const handleDrawerClose = () => {
    setOpen(false)
  }

  return (
    <>
      <AppBar
        position='fixed'
        className={clsx(classes.appBarTheme, classes.root, {
          [classes.appBarShift]: open,
        })}>
        <Toolbar>
          <IconButton
            color='inherit'
            aria-label='open drawer'
            onClick={handleDrawerOpen}
            edge='start'
            className={clsx(classes.menuButtonDrawer, {
              [classes.navHide]: open,
            })}>
            <MenuIcon />
          </IconButton>
          <Typography
            style={{ textDecoration: 'none', color: 'white' }}
            component={Link}
            to='/'
            variant='h6'
            noWrap
            className={classes.root}>
            text
          </Typography>
          <DropDownAcc handleSnk={props.handleSnk} />
        </Toolbar>
      </AppBar>
      <Drawer
        variant='permanent'
        className={clsx(classes.drawerTheme, {
          [classes.drawerOpen]: open,
          [classes.drawerClose]: !open,
        })}
        classes={{
          paper: clsx({
            [classes.drawerOpen]: open,
            [classes.drawerClose]: !open,
          }),
        }}>
        <div className={classes.toolbarTheme}>
          <IconButton onClick={handleDrawerClose}>
            {theme.direction === 'rtl' ? <ChevronRight /> : <ChevronLeft />}
          </IconButton>
        </div>
        <Divider />
        <List>
          {[
            'My Profile',
            'New Room',
            'Browse Rooms',
            'Leaderboards',
            'Support',
          ].map((text, index) => (
            <ListItem button key={text}>
              <Box ml={0.5}>
                <ListItemIcon>
                  {index === 0 ? <AccountCircle fontSize='large' /> : null}
                  {index === 1 ? <AddCircle fontSize='large' /> : null}
                  {index === 2 ? <Search fontSize='large' /> : null}
                  {index === 3 ? <Assignment fontSize='large' /> : null}
                  {index === 4 ? <Help fontSize='large' /> : null}
                </ListItemIcon>
              </Box>
              <ListItemText primary={text} />
            </ListItem>
          ))}
        </List>
      </Drawer>
    </>
  )
}

主题数据

const useStyles = makeStyles((theme) => ({
  root: {
    display: 'flex',
    flexGrow: 1,
  },
  appBarTheme: {
    zIndex: theme.zIndex.drawer + 1,
    transition: theme.transitions.create(['width', 'margin'], {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.leavingScreen,
    }),
  },
  appBarShift: {
    marginLeft: drawerWidth,
    width: `calc(100% - ${drawerWidth}px)`,
    transition: theme.transitions.create(['width', 'margin'], {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.enteringScreen,
    }),
  },
  menuButtonDrawer: {
    marginRight: 36,
  },
  navHide: {
    display: 'none',
  },
  drawerTheme: {
    width: drawerWidth,
    flexShrink: 0,
    whiteSpace: 'nowrap',
  },
  drawerOpen: {
    width: drawerWidth,
    transition: theme.transitions.create('width', {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.enteringScreen,
    }),
  },
  drawerClose: {
    transition: theme.transitions.create('width', {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.leavingScreen,
    }),
    overflowX: 'hidden',
    width: theme.spacing(7) + 1,
    [theme.breakpoints.up('sm')]: {
      width: theme.spacing(9) + 1,
    },
  },
  toolbarTheme: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'flex-end',
    padding: theme.spacing(0, 1),
    // necessary for content to be below app bar
    ...theme.mixins.toolbar,
  },
  contentTheme: {
    flexGrow: 1,
    padding: theme.spacing(3),
    marginLeft: 65,
    marginRight: 10,
  }})

Answer 1

我遇到了同样的问题，由于我无法解决，这里有一个可能的解决方法。 只需将 Drawer 组件的变体更改为“持久”即可：

<Drawer
        variant='permanent'
      ...

到

<Drawer
        variant='persistent'
      ...