如何将Material UI SwipeableDrawer组件定位到屏幕右侧？

你的核心问题是错误设置了anchor属性——当前代码里anchor="bottom"，所以抽屉是从屏幕底部滑入的，而非左侧。要改成右侧，直接修改anchor属性即可，这是Material UI Drawer组件内置的响应式方案，完全不需要用float、padding这类hack手段。

正确修改方案 #

将SwipeableDrawer的anchor属性从"bottom"改为"right"，Material UI会自动处理抽屉的位置、滑入方向和响应式适配：

<SwipeableDrawer
  className="swipeDrawer"
  anchor="right" // 这里改成right
  variant="temporary"
  open={isFilterShown}
  onOpen={toggleFilterModal}
  onClose={toggleFilterModal}
  sx={{
    '& .MuiDrawer-paper': {
      height: '50%',
      width: '80%', // 可选：自定义抽屉宽度，响应式场景推荐用百分比
      maxWidth: '400px' // 可选：限制最大宽度，避免大屏幕过宽
    }
  }}
>
  {/* 内部内容保持不变 */}
</SwipeableDrawer>

为什么之前的方法无效？ #

Material UI的Drawer组件通过anchor属性（可选值：left/right/top/bottom）控制定位逻辑，组件内部会生成对应的CSS类（比如MuiDrawer-paperAnchorRight），这些内置样式优先级高于你自定义的float、display属性，所以你之前的修改会被覆盖。

额外优化建议 #

• 如果你需要更精细的响应式宽度，可以用Material UI的useMediaQuery钩子配合sx样式：

  import { useMediaQuery, useTheme } from '@mui/material';
  
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
  
  // 在sx中使用：
  width: isMobile ? '95%' : '70%'
  

• 你的filterBox类的width:100%可以保留，让内部内容自动适配抽屉宽度。

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