不能覆盖资料ui 5的抽屉根样式。

Question

我正试图为我的应用程序构建一个由资料ui的抽屉组成的侧边栏。但是我不能覆盖抽屉根的宽度，它仍然是0，所以flex (Stack)不能像预期的那样安排它的子程序。已经在沙箱https://codesandbox.io/s/interesting-tharp-dp3mif?file=/src/App.js:71-397上创建了一个示例。

“bbb”应该在抽屉的右边。我尝试使用MuiDrawer-root和MuiDrawer-对接来设置其宽度，它们都不起作用。

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

Answer 1

您目前正在编写& .class，这意味着您希望使用该className访问子程序，但这里不是这样的。当前元素有那个className，所以您想要编写&.class，所以做这个修复，它应该可以工作：

-     "& .MuiDrawer-root": { width: 200, zIndex: -1 },
+     "&.MuiDrawer-root": { width: 200, zIndex: -1 },