Global style overrides for SwipeableDrawer

[manuthecoder]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Summary 💡

It would be awesome if MUI let me override the SwipeableDrawer globally!

Docs for SwipeableDrawer: https://mui.com/material-ui/api/swipeable-drawer/ Docs for Global theme overrides: https://mui.com/material-ui/customization/theme-components/#global-style-overrides

Examples 🌈

Docs for SwipeableDrawer: https://mui.com/material-ui/api/swipeable-drawer/ Docs for Global theme overrides: https://mui.com/material-ui/customization/theme-components/#global-style-overrides

Should be able to customize like this:

const theme = createTheme({
  components: {
    MuiSwipeableDrawer: { 
       // ...
   },
  },
});

Motivation 🔦

Should be similar to mui drawer

[mnajdova]

The SwipeableDrawer only offers an alternative way of how to open the drawer, it doesn't provide any different visual representation of the drawer. In general, so far the drawers in apps are consistent regardless of whether they are swipeable or not. Would be interesting if you can share more about the motivation for a need like this.

[manuthecoder]

I submitted this issue because I could not add any of the props unique to swipeabledrawer (such as disableSwipeToOpen) in the global theme overrides

[mnajdova]

Ah ok, it's about the default props. We could add the default props in the theme's components interface. Would you like to create a PR for this?

[manuthecoder]

Sure! However, I do not know how to implement it into the actual material-ui library myself, so I would appreciate if you would either work on this with your team or give me documentation on how to implement this. Thank you!

[Vansh-Baghel]

@mnajdova Hey, I am a developer, could you guide me how shall I make changes in it to get the expected result?

[nicolas-ot]

I will work on this

[nicolas-ot]

@manuthecoder you can actually do this already.

const theme = createTheme({
    components: {
      MuiSwipeableDrawer: {
        defaultProps: {
          disableSwipeToOpen: true,
        },
      },
    },
  });

@mnajdova I think this issue can be closed because it is fixed here already https://github.com/mui/material-ui/pull/34643