How to set className prop?

[vndevil]

Hi DEV,

I want to set className prop, but I don't know how to do it

import Lottie from 'lottie-react';
import { makeStyles } from '@mui/styles';

const useStyles = makeStyles(theme => ({
    icon: {
        width: theme.spacing(3),
        height: theme.spacing(3),
        [theme.breakpoints.down('sm')]: {
            width: theme.spacing(2),
            height: theme.spacing(2),
            '& > div': { fontSize: 16 }
        }
    }
}));

export default function LottieAnimation(props) {
    const classes = useStyles();
    
    return <Lottie {...props} className={classes.icon} />
}

[GhostyJade]

Simply, the <Lottie /> component doesn't accept a className as a prop that isn't string type (makeStyles return a function hook, according to MUI v4 legacy documentation. In the project I'm developing using this library, I use Tailwind CSS v3. I've never tried MUI v5 but I think that something could be achieved with styled