CODEWITHSUNDEEP
reactjsmaterial-ui
suyuan xu
suyuan xu

Reputation: 130

can't override material ui 5's drawer root's style

I am trying to build a sidebar by material ui's drawer for my application. but I am not able to overwrite drawer root's width, it is still 0 so flex box(Stack) can't arrange its children as expected. an example has been created on sandbox https://codesandbox.io/s/interesting-tharp-dp3mif?file=/src/App.js:71-397.

the 'bbb' is expected to be on the right side of the drawer. I have tried to use MuiDrawer-root and MuiDrawer-docked to set its width, neither of them works.

 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>
  );
}

Upvotes: 0

Views: 782

Answers (1)

M&#228;hnenwolf
M&#228;hnenwolf

Reputation: 810

You are currently writing & .class, which means you want to access a child with that className, but that's not the case here. The current element has that className, so you want to write &.class instead, so do this fix and it should work:

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

Upvotes: 2

Related Questions