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