reactjs 如何在材质UI v5.11.11中的ImageList上添加悬停和鼠标点击效果

gfttwv5a 于 2023-03-01 发布在 React

关注(0)|答案(1)|浏览(89)

我已经用MaterialUI创建了一个图片列表，现在我想添加鼠标悬停效果来突出显示鼠标光标下的图片。下面是我的图片列表代码。我如何实现这一点？

<Box
        sx={{
          height: 450,
          marginLeft: "10em",
          backgroundColor: "white",
          display: "grid",
          gridTemplateColumns: {
            mobile: "repeat(1, 1fr)",
            bigMobile: "repeat(2, 1fr)",
            tablet: "repeat(3, 1fr)",
            desktop: "repeat(4, 1fr)",
          },
          [`& .${imageListItemClasses.root}`]: {
            display: "flex",
            flexDirection: "column",
          }
        }}
      >
        <ImageList
          variant="quilted"
          sx={{ width: 2000, height: 1000, margin: "5em" }}
          cols={3}
          rowHeight={500}
          
        >
          {cardsList.map((item, index) => (
            <div>
              <ImageListItem key={index}>
                <img
                  src={"data:image/jpeg;base64," + item.content}
                  alt={item.fileName}
                />
              </ImageListItem>
            </div>
          ))}
        </ImageList>
      </Box>

reactjs

来源：https://stackoverflow.com/questions/75591042/how-to-add-hover-and-mouse-click-effect-on-imagelist-in-material-ui-v5-11-11

1条答案

按热度按时间

gmxoilav1#

将ImageListItem更改为具有悬停样式的自定义项，如下所示..尽管我个人不喜欢MUI v5.11中样式元素的新方式

const ImageListItemWithStyle = styled(ImageListItem)(({ theme }) => ({
    "&:hover": {
      cursor: "pointer",
      opacity: 0.8,
      border: `solid 5px red`,
      //boxShadow: `5px 10px ${theme.palette.primary.main}`,
      
    },
  }));

 <ImageListItemWithStyle key={index} >
                <img
                  src={"data:image/jpeg;base64," + item.content}
                  alt={item.fileName} 
                  id={index}
                  onClick={cardSelected}
                />
              </ImageListItemWithStyle>

赞(0）回复(0）举报 2023-03-01

我来回答

reactjs 如何在材质UI v5.11.11中的ImageList上添加悬停和鼠标点击效果

1条答案

相关问题

热门标签

最新问答