Proper way of passing classes into child components in MUI? - css

Question

I was using material-UI, but then I decided to migrate to MUI. Which I found was complicated change because.
Material UI format
import { makeStyles } from "#material-ui/core";
export const useStyles = makeStyles((theme) => ({
root: {
display: 'flex',
// alignItems: 'center',
width: '100%',
position: 'relative',
// backgroundColor: '#C2C2C2',
// marginTop: '700px',
height: theme.spacing(65)
// color: 'white',
// justifyContent: 'space-between'
},
}));
TO
MUI Format
import { makeStyles } from '#mui/styles';
import { styled } from '#mui/material/styles';
export const useStyles = () => ({
Root: styled('div')(({theme}) => ({
height: theme.spacing(10),
display: 'flex',
alignItems: 'center',
width: '100%',
position: 'relative',
color: 'white',
justifyContent: 'space-between',
[theme.breakpoints.down('xs')]: {
// justifyContent: 'center'
padding: '0 10px 0 10px'
}
})),
Logo: styled('div')(({theme}) => ({
display: 'flex',
alignItems: 'center',
gap: '1em',
letterSpacing: '0.5em',
"& h4": {
fontSize: '1.8em'
},
[theme.breakpoints.up('sm')]: {
marginLeft: '2em',
}
})),
})
Which is fine, but the problem is that earlier, I had some components like this.
<AnimeLogoWhite className={classes.logoIcon} />
Now, this component simply took the class logoIcon and applied it.
logoIcon: {
height: theme.spacing(6),
position: 'relative',
// iphone SE custom breakpoint
[theme.breakpoints.down(325)]: {
height: theme.spacing(5)
}
},
AnimeLogoWhite.tsx
import { FC } from 'react';
import whiteLogo from '../../../public/arkAnimeLogoWhite.svg';
interface Props {
className: string
}
export const AnimeLogoWhite: FC<Props> = ({className}) => {
return(
<img className={className} src={whiteLogo.src} alt='' />
)
}
I can't do this further with MUI.
Can anyone help me on how to achieve something similar?