React中修改Material UI底部Swipeable Drawer宽度的方法

要让底部抽屉不占满整个屏幕宽度，核心是修改抽屉的Paper组件样式（这是抽屉的实际容器，默认宽度为100%），以下是两种可行方案：

方案一：通过sx直接覆盖Paper类样式 #

import SwipeableDrawer from '@mui/material/SwipeableDrawer';

<SwipeableDrawer
  anchor="bottom"
  open={open}
  onClose={handleClose}
  onOpen={handleOpen}
  sx={{
    '& .MuiDrawer-paper': {
      width: '80%', // 自定义宽度，可设百分比、固定值如'500px'
      maxWidth: '90vw', // 移动端适配，避免宽度溢出屏幕
      margin: '0 auto', // 让抽屉水平居中
      borderTopLeftRadius: '16px', // 可选：添加顶部圆角优化视觉
      borderTopRightRadius: '16px'
    }
  }}
>
  {/* 抽屉内部内容 */}
</SwipeableDrawer>

方案二：通过PaperProps传递样式（更直观） #

import SwipeableDrawer from '@mui/material/SwipeableDrawer';

<SwipeableDrawer
  anchor="bottom"
  open={open}
  onClose={handleClose}
  onOpen={handleOpen}
  PaperProps={{
    sx: {
      width: { xs: '95%', sm: '80%', md: '60%' }, // 响应式宽度，适配不同设备
      margin: '0 auto',
      borderTopLeftRadius: '16px',
      borderTopRightRadius: '16px'
    }
  }}
>
  {/* 抽屉内部内容 */}
</SwipeableDrawer>

说明 #

你之前修改顶部区域宽度无效，是因为顶部仅为抽屉的触发/拖动区域，实际承载内容的容器是Paper组件，必须针对它调整宽度才能生效。

内容的提问来源于stack exchange，提问作者Gus