'how to remove vertical line from the marerial ui permanent drawer

I'm trying to remove the vertical line from the permanent drawer of material-UI, any suggestion please.

Solution 1:^[1]

<Drawer
        sx={{
          width: drawerWidth,
          flexShrink: 0,
          '& .MuiDrawer-paper': {
            width: drawerWidth,
            boxSizing: 'border-box',
          },
          border:"none"
        }}
        variant="permanent"
        anchor="left"
      >

I was working on Mini variant drawer, and I added

border:"none"

in both drawerOpen and drawerClose, it works for me.

You can try the code above.

Solution 2:^[2]

Had the same problem, hopefully the Solution is not too late for you. To remove the Border, simply add "& .MuiDrawer-paper": { borderWidth: 0 } as an entry to your sx property.

Solution 3:^[3]

Take a look at overriding styles with withStyles HOC: https://material-ui.com/guides/typescript/#usage-of-withstyles For a complete list of classes you can see: https://material-ui.com/api/drawer/ You want something like this:

const StyledDrawer = withStyles(theme => ({
    // css classes overrides goes here
})(props => <Drawer {...props} />);

Solution 4:^[4]

Target the PaperProps to remove the border or for background modifications. <Drawer PaperProps={{style: {border: 'none'}}}>...</Drawer> `

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Peter Csala
Solution 2	Dominik Baurecht
Solution 3	atri
Solution 4	cinfwatd

'how to remove vertical line from the marerial ui permanent drawer

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]

Solution 4:^[4]