使react导航抽屉从底部弹出，而不是从左/右弹出

npm install react react-dom react-router-dom @material-ui/core @material-ui/icons

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Drawer from '@material-ui/core/Drawer';

const useStyles = makeStyles({
  drawer: {
    width: '100%',
    height: 'auto',
    display: 'flex',
    alignItems: 'flex-end'
  },
  drawerPaper: {
    width: '100%',
    height: 'auto',
    backgroundColor: 'lightgray'
  }
});

const BottomDrawer = ({ isOpen, onClose }) => {
  const classes = useStyles();

  return (
    <Drawer
      anchor="bottom"
      open={isOpen}
      onClose={onClose}
      className={classes.drawer}
      classes={{ paper: classes.drawerPaper }}
      transitionDuration={{ enter: 500, exit: 200 }}
    >
      {/* 在这里添加抽屉的内容 */}
    </Drawer>
  );
};

export default BottomDrawer;

import React, { useState } from 'react';
import BottomDrawer from './BottomDrawer';

const App = () => {
  const [drawerOpen, setDrawerOpen] = useState(false);

  const handleDrawerToggle = () => {
    setDrawerOpen(!drawerOpen);
  };

  return (
    <div>
      {/* 在这里添加其他应用程序内容 */}
      <button onClick={handleDrawerToggle}>打开抽屉</button>
      <BottomDrawer isOpen={drawerOpen} onClose={handleDrawerToggle} />
    </div>
  );
};

export default App;