Gamote / lottie-react

A lightweight React library for rendering complex After Effects animations in real time using Lottie.
https://lottiereact.com
Other
791 stars 59 forks source link

How to set className prop? #74

Open vndevil opened 2 years ago

vndevil commented 2 years ago

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 commented 2 years ago

Simply, the 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