MUI Drawer组件anchor='right'不生效，如何设置右侧显示？

以下是几个排查和解决的方向：

1. 先排除自定义样式/主题的干扰 #

先简化代码，去掉ThemeProvider和自定义className，测试最基础的Drawer是否能正常显示在右侧：

<Drawer anchor='right' open={true}>
  <div>测试抽屉内容</div>
</Drawer>

如果这个基础版本生效，说明问题出在你的自定义主题或className样式上。

2. 检查自定义主题DrawerTheme的配置 #

如果使用了自定义主题，确认是否在MuiDrawer的styleOverrides里覆盖了抽屉容器（paper）的定位属性。比如主题里如果设置了left: 0或者固定的position，会直接覆盖anchor='right'带来的right: 0样式。

修改主题配置，移除影响定位的代码：

const DrawerTheme = createTheme({
  components: {
    MuiDrawer: {
      styleOverrides: {
        paper: {
          // 移除left/right/position这类会干扰定位的配置
          width: '8.333333%', // 保留你需要的宽度
          backgroundColor: '#f87171', // 对应red-400的颜色值
          opacity: 1
        }
      }
    }
  }
});

3. 修正自定义样式的作用目标 #

你当前给Drawer组件加的className是作用在抽屉的根元素上，而实际控制抽屉位置、宽度、背景的是内部的.MuiDrawer-paper元素。直接给根元素加样式可能无法生效，甚至会和MUI的默认样式冲突。

改用sx属性来精准修改paper的样式：

<ThemeProvider theme={DrawerTheme}>
  <Drawer 
    hideBackdrop 
    anchor='right' 
    open={true}
    sx={{
      '& .MuiDrawer-paper': {
        width: '8.333333%', // 对应tailwind的w-1/12
        backgroundColor: 'red.400',
        opacity: 1
      }
    }}
  >
    <div>抽屉内容</div>
  </Drawer>
</ThemeProvider>

4. 确认MUI版本兼容性 #

anchor属性在MUI v5及以上版本是稳定支持的，如果你使用的是v4或更早版本，需要检查对应版本的文档（不过首次使用大概率是v5，这条可以作为兜底排查）。

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