MUI v5 migration - replacing withStyles and createStyles with styled utility

Viewed 193

I am trying to migrate my MUI v4 to v5

Trying to replace all those utilities e.g. withStyles, createStyles and makeStyles

my existing code is as below:

export const DrawerThumbnail = withStyles(() =>
  createStyles({
    drawerPaper: {
      width: '200px',
      top: 112,
      backgroundColor: Color.White,
      border: 'none',
      marginTop: '2px',
      padding: '0px 5px 0px 5px',
    },
  })
)(({ classes, ...props }: any) => {
  return (
    <Drawer
      variant="permanent"
      classes={{
        paper: classes.drawerPaper,
      }}
      anchor="left"
      {...props}
    />
  );
});

Trying to use styled utility from @mui/system The new code looks like this but obviously it doesn't work as I don't know how to transform the above using styled utility.

export const DrawerThumbnail2 = styled((props: any) =>
    <Drawer
      variant="permanent"
      anchor="left"
      {...props}
    />
  )`
      width: '200px';
      top: 112;
      background-color: ${Color.White};
      border: 'none';
      margin-top: '2px';
      padding: 0px 5px 0px 5px;
  `;

Please help

0 Answers
Related