Why wont a MUI component be hidden by setting display to none in the sx prop?

user_13010844 0
Viewed 1645

I'm trying to build a responsive side drawer with MUI's Drawer component in React. I'm using MUI version 4.12.1.

On the mui.com example they use the sx prop and pass in an object with display set to some different screen-width dependant values.

However, when I use this code in an App.js file:

<Drawer
  variant="permanent"
  sx={{
    display: { xs: 'none', sm: 'none' },
  }}
  open
>
  Hello There
</Drawer>

The drawer still shows up. It also shows up when I simply set display: 'none'

Why is this? How can I actually create a drawer like this with something like sx={{ display: { xs: 'none', sm: 'block' } }} that hides the drawer at smaller screen sizes?

material-ui reactjs javascript
2 Answers

In MUI v4, this is done with the Hidden component

As NearHuscarl said, the sx prop is only available in MUI v5.

So to hide your drawer for sm and smaller, you'd probably want something like this:

<Hidden smDown implementation="css">
    <Drawer
      variant="permanent"
      open
    >
      Hello There
    </Drawer>
</Hidden>
user_130108440

sx prop is only available in MUI v5, please upgrade MUI to the latest version. You can see the installation guide here for more detail.

user_94494260
Related