I am trying to figure out how I can refactor the code so that my components look good. I am using inline and internal style using makeStyles and classes.

Could any experience or expert please advise me on how I can achieve this? For example, can I add this code somewhere else with style.jsx and then import it wherever I want ? Is this a possible solution?

Please see the sample code:

const useStyles = makeStyles((theme) => ({
    root: {
        minWidth: "15px",
        "&:hover": {
            backgroundColor: "#356E44",
            color: "white",
        },
    },

    cardMain: {
        width: "200",
        height: "260",
        margin: "10",
        "&:hover": {
            boxShadow: "5px 3px 5px gray",
        },
    },

}));

Usage of the above in compoenent:

 <Card className={classes.cardMain}> </Card>

Thanks for the help and efforts