やりたかったこと
hover時に子コンポーネントのcssを変更する
結論
通常はopacityを0にしておいて、hover時に1に変更する。
makeStylesを使った場合はちょっと特殊な書き方だったので、makeStylesを使いたい人は参考にしてください。
constuseStyles=makeStyles({...image_item_bar:{opacity:0,},image_item:{'&:hover':{cursor:'pointer',"& $image_item_bar":{opacity:1.0,}}},});exportdefaultfunctionGridImageList(){constclasses=useStyles()return(<divclassName={classes.root}><ImageListvariant="masonry"cols={3}gap={8}>{itemData.map((item)=>(<ImageListItemkey={item.img}className={classes.image_item}><imgsrcSet={`${item.img}?w=161&fit=crop&auto=format 1x,
${item.img}?w=161&fit=crop&auto=format&dpr=2 2x`}alt={item.title}className={classes.img}/>
<ImageListItemBartitle={item.title}actionIcon={<IconButtonaria-label={`info about ${item.title}`}className={classes.icon}><DeleteIcon/></IconButton>
}className={classes.image_item_bar}/>
</ImageListItem>
))}</ImageList>
</div>
);}