【Material-ui】makeStylesを使った子要素のcss変更のやり方

6631 ワード
React material-ui CSS CSS テキストリンク

やりたかったこと

hover時に子コンポーネントのcssを変更する

結論

通常はopacityを0にしておいて、hover時に1に変更する。
makeStylesを使った場合はちょっと特殊な書き方だったので、makeStylesを使いたい人は参考にしてください。

const useStyles = makeStyles({
  ...
  image_item_bar: {
    opacity: 0,
  },
  image_item: {
    '&:hover': {
      cursor: 'pointer',
      "& $image_item_bar": {
        opacity: 1.0,
      }
    }
  },
});

export default function GridImageList() {
  const classes = useStyles()

  return (
    <div className={classes.root}>
      <ImageList variant="masonry" cols={3} gap={8}>
        {itemData.map((item) => (
          <ImageListItem key={item.img} className={classes.image_item} >
            <img
              srcSet={`${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}
            />
            <ImageListItemBar
              title={item.title}
              actionIcon={
                <IconButton
                  aria-label={`info about ${item.title}`}
                  className={classes.icon}
                >
                  <DeleteIcon />
                </IconButton>
              }
              className={classes.image_item_bar}
            />
          </ImageListItem>
        ))}
      </ImageList>
    </div>
  );
}