如何让我的 Material UI Modal 响应？

Question

I created a Modal with a Carousel inside of it and I want it to be responsive. I tried out several CSS settings that I found here on StackOverflow, but none of them worked for me. How can I fix it?

CSS:

media: {
    width: "auto",
    paddingTop: "56.25%" // 16:9
  },
modalCard: {
    position: "absolute",
    top: "50%",
    left: "50%",
    transform: "translate(-50%, -50%)",
    width: "50%",
    aspectRatio: "16 / 9",
    margin: "0 auto"
  }

Rnd.jsx:

<Card className={classes.modalCard}>
    <Carousel autoPlay={false} indicators={false} animation="slide">
        {images.map((img, index) => {
            return (<CardMedia className={classes.media} image={img.imgPath} />
        );
      })}
    </Carousel>
</Card>

The project: https://codesandbox.io/s/react-playground-forked-3uggr5?file=/Rnd.jsx:131-139

(Off question: Why do I get that warning?)

Answer 1

I suggest you to use https://www.npmjs.com/package/react-responsive-carousel .

I created sandbox here so you can check it.