reactjs - 材质 Ui 抽屉在构建时损坏

Question

我正在使用带有反应的材料 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,
  }})

标签： reactjsbuildmaterial-ui

Answer 1

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

<Drawer
        variant='permanent'
      ...

至

<Drawer
        variant='persistent'
      ...