无法覆盖Material UI 5 Drawer根节点宽度样式问题求助

样式不生效的核心是sx选择器写法错误：

• 代码里写的& .MuiDrawer-root带了后代选择器空格，逻辑是匹配当前组件内部、类名为MuiDrawer-root的子元素，但Drawer的根节点本身就携带MuiDrawer-root类名，这个选择器无法命中根节点
• Drawer根节点默认宽度为0，flex布局下宽度为0的元素不会占据横向空间，就算给内部的paper元素设置了200宽度，根节点宽度还是0，Stack的flex排列会把后续的'bbb'内容顶到最左侧，无法实现侧边栏居左、内容居右的效果

不需要额外通过MuiDrawer-docked类做样式覆盖，直接修正选择器逻辑即可：

• 直接给Drawer根节点设置宽度属性，不需要嵌套后代选择器
• 保留内部MuiDrawer-paper的宽度配置，保证抽屉内容区域和根节点宽度一致

export default function App() {
  return (
    <Stack direction="row">
      <Drawer
        variant="permanent"
        open
        sx={{
          width: 200,
          zIndex: -1,
          "& .MuiDrawer-paper": {
            width: 200,
            zIndex: -1
          }
        }}
      ></Drawer>
      <div>bbb</div>
    </Stack>
  );
}

修复后Drawer根节点会占据200px的横向宽度，flex布局可以正确识别这个占位，'bbb'内容就会正常显示在侧边栏右侧。

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