如何使我的 Material UI 模态响应？

Question

我创建了一个模态框，里面有一个旋转木马，我希望它能够响应。我尝试了在 Whosebug 上找到的几个 CSS 设置，但其中 none 对我有用。我该如何解决？

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>

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

（关闭问题：为什么我会收到该警告？）

Answer 1

我建议你使用https://www.npmjs.com/package/react-responsive-carousel。

我创建了沙盒 here 所以你可以查看它。

如何使我的 Material UI 模态响应？

How to make my Material UI Modal responsive?

css

reactjs

material-ui

responsive