如何使用 React 和 Material UI 制作响应式内容？答案

【问题标题】：How to make responsive content with React and Material UI?如何使用 React 和 Material UI 制作响应式内容？
【发布时间】：2021-10-05 11:27:46
【问题描述】：

我正在使用 React 和 Material UI 设计一个产品详细信息页面。我试图使页面响应。但是描述部分一直在图像上重叠，直到屏幕缩小到移动尺寸。内容在此时堆叠，但图像和文本未根据屏幕尺寸进行调整。

我觉得图片样式有问题。如何让图像具有响应性？

这是我的代码

styling section

const useStyles = makeStyles((theme) => ({
  content: {
    flexGrow: 1,
    padding: theme.spacing(3),
  },
  toolbar: {
    display: "flex",
    alignItems: "center",
    justifyContent: "flex-end",
    padding: theme.spacing(0, 1),
    // necessary for content to be below app bar
    ...theme.mixins.toolbar,
  },
}));

function

export default function ProductDetails() {
  const classes = useStyles();

  return (
    <main className={classes.content}>
      <div className={classes.toolbar} />

      <Grid container spacing={3}> {/* image and description container */}
        <Grid item xs={12} sm={6}> {/* image container */}
          <Grid> {/* preview image */}
            <img src="luxury-watch.jpg" width="600" id="preview" alt="" />
          </Grid>
          <Grid> {/* sub images */}
            <img src="luxury-watch.jpg" width="140" id="img1" alt="" />
            <img src="luxury-watch.jpg" width="140" id="img2" alt="" />
            <img src="luxury-watch.jpg" width="140" id="img3" alt="" />
            <img src="luxury-watch.jpg" width="140" id="img4" alt="" />
          </Grid>
        </Grid>

        <Grid item xs={12} sm={6}> {/* description container */}
          <div>
            <h1>ROLEX</h1>
            <p> .... </p>
            <h2><span><sup>$</sup></span>1250</h2>
            <Button variant="contained" color="secondary">ADD TO CART</Button>
          </div>
        </Grid>
      </Grid>
    </main>
  );
}

【问题讨论】：

标签： html reactjs responsive-design material-ui

【解决方案1】：

我认为您在 Grid 元素上遗漏了一些道具。试试这个：

export default function ProductDetails() {
  const classes = useStyles();

  return (
    <main className={classes.content}>
      <div className={classes.toolbar} />

      <Grid container spacing={3}> {/* image and description container */}
        <Grid item container xs={12} sm={6}> {/* image container */}
          <Grid item> {/* preview image */}
            <img src="luxury-watch.jpg" width="600" id="preview" alt="" />
          </Grid>
          <Grid item> {/* sub images */}
            <img src="luxury-watch.jpg" width="140" id="img1" alt="" />
            <img src="luxury-watch.jpg" width="140" id="img2" alt="" />
            <img src="luxury-watch.jpg" width="140" id="img3" alt="" />
            <img src="luxury-watch.jpg" width="140" id="img4" alt="" />
          </Grid>
        </Grid>

        <Grid item container xs={12} sm={6}> {/* description container */}
          <div>
            <h1>ROLEX</h1>
            <p> .... </p>
            <h2><span><sup>$</sup></span>1250</h2>
            <Button variant="contained" color="secondary">ADD TO CART</Button>
          </div>
        </Grid>
      </Grid>
    </main>
  );
}

如果您的Grid 项目不是container，则您不能应用xs 属性，并且您的控制台也应该对此发出警告

【讨论】：

【解决方案2】：

您可以使用材质 ui 断点进行响应

const useStyles = makeStyles((theme) => ({
  content: {
    flexGrow: 1,
    padding: theme.spacing(3),
  },
  toolbar: {
    display: "flex",
    alignItems: "center",
    justifyContent: "flex-end",
    padding: theme.spacing(0, 1),
    // necessary for content to be below app bar
    ...theme.mixins.toolbar,
    [theme.breakpoints.down('lg')]:{
      width:'60%',
    },
    [theme.breakpoints.up('lg')]:{
      width:'60%',
    }
  }
}));

【讨论】：