[Material-ui]画像のサイズを大きくしたい

Question

前提・実現したいこと

material-uiのImageListを使っています。
流れてくる画像のサイズを大きくしたいのですが、直接imgのwidthやheightを指定しても変わらず、makeStyklesのimgで指定しても変化がありませんでした。
このような場合だとどのようにすれば画像サイズを大きくできるのでしょうか。
わかる方がいましたらコメントお願いします。

発生している問題・エラーメッセージ

画像サイズが変わらない

該当のソースコード

/* eslint-disable @typescript-eslint/no-use-before-define */
import React from 'react'
import { makeStyles } from '@material-ui/core/styles'
import ImageList from '@material-ui/core/ImageList'
import ImageListItem from '@material-ui/core/ImageListItem'
import ImageListItemBar from '@material-ui/core/ImageListItemBar'
import BasicModal from './BasicModal'

const useStyles = makeStyles({
  root: {
    width: '100%',
    height: '60%',
    overflow: 'scroll',
    margin: '0, auto'
  },
  img: {
    borderRadius: 10,
    width: 500
  },
  icon: {
    color: 'rgba(255, 255, 255, 0.54)',
  },
  image_item: {
  },
})

export default function GridImageList(props: {images: {label: string, url: string, id: number}[]}): JSX.Element {
  const classes = useStyles()

  return (
    <div className={classes.root}>
      <ImageList variant="masonry" cols={4} gap={8}>
        {props.images.map((item) => (
          <ImageListItem key={item.id} className={classes.image_item} >
            <img
              srcSet={`${item.url}?w=161&fit=crop&auto=format 1x,
                ${item.url}?w=161&fit=crop&auto=format&dpr=2 2x`}
              alt={item.label}
              className={classes.img}
            />
          </ImageListItem>
        ))}
      </ImageList>
    </div>
  );
}

試したこと

• imgの直接指定
• makeStylesでの指定

Answer 1

公式に書いてあるようにsxを使うパターンはいかがでしょうか？

<ImageList sx={{ width: 500, height: 450 }} variant="masonry" cols={4} gap={8}>

Comments

[aiai8976]

ImageListは全体のcssだったので、ImageListItemにsxを追加すればうまくいけました！
ありがとうございました。