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?
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.
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>