React/useStyles

const useStyles = makeStyles((theme) => ({
    root: {
        [theme.breakpoints.down('sm')]: {
            margin: 8,
            width: 'calc(50% - 16px)'
        },
        [theme.breakpoints.up('md')]: {
            margin: 16,
            width: 'calc(33.3333% - 32px)'
        }
    },
    content: {
        display: 'flex',
        padding: '16 8',
        textAlign: 'left',
        '&:last-child': {
            paddingBottom: 16
        }
    },
    icon: {
        marginRight: 0,
        marginLeft: 'auto'
    },
    media: {
        height: 0,
        paddingTop: '100%'
    },
    price: {
        color: theme.palette.secondary.dark,
        fontSize: 16

    },
    productName: {
        boxOrient: 'vertical',
        display: '-webkit-box',
        fontSize: 14,
        lineHeight: '18px',
        overflow: 'hidden',
        [theme.breakpoints.down('sm')]: {
            height: 36,
            lineClamp: 2,
        },
        [theme.breakpoints.up('md')]: {
            height: 18,
            lineClamp: 1,
        }
    }
}));

const ProductCard = (props) => {
    const classes = useStyles();
    return (
        Card className={classes.root}>
            CardMedia
                className={classes.media}
                image={images[0].path}
                onClick={() => dispatch(push('/product/'+props.id))}
                title=""
            />
            CardContent className={classes.content}>
                div onClick={() => dispatch(push('/product/'+props.id))}>
                    Typography className={classes.productName} color="textSecondary" component="p">
                        {props.name}
                    /Typography>
                    Typography className={classes.price} component="p">
                        ¥{price}
                    /Typography>
                /div>
                {isAdministrator && (
                    <>
                        IconButton className={classes.icon} onClick={handleClick} color="inherit">
                            MoreVertIcon />
                        /IconButton>
                        Menu
                            id="menu-appbar"
                            anchorEl={anchorEl}
                            keepMounted
                            open={Boolean(anchorEl)}
                            onClose={handleClose}
                        >
                            MenuItem
                                onClick={() => {
                                    dispatch(push('/product/edit/'+props.id))
                                    handleClose()
                                }}
                            >
                                編集する
                            /MenuItem>
                            MenuItem
                                onClick={() => {
                                    dispatch(deleteProduct(props.id))
                                    handleClose()
                                }}
                            >
                                削除する
                            /MenuItem>
                        /Menu>
                    
                )}
            /CardContent>
        /Card>
    );
}
export default ProductCard