材料ui中的网格项重叠

Question

考虑以下代码：

<div className="mx-md-4 my-5 mx-sm-0 mx-xs-0 flex-column align-items-center d-flex justify-content-center ">
                <Grid className='mt-3' container spacing={2}>
                    <Grid className='mt-4' item md={4} sm={12} xs={12}>
                        <img src={props.src} className='rounded' alt="" />
                    </Grid>
                    <Grid className='mt-4' item md={8} sm={12} xs={12}>
                        <div className="container d-flex">
                            <h3 className=' mt-4 mb-5'><strong>{props.title}</strong></h3>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus eum provident alias, ipsa unde quidem perferendis inventore harum quibusdam placeat odit architecto ad deserunt dignissimos vero ipsam voluptates? Excepturi magnam eveniet odit! Quam numquam culpa eaque vel, cupiditate expedita harum, labore explicabo molestiae molestias fuga laboriosam, itaque sed incidunt soluta eos repellat autem repudiandae praesentium. Consectetur esse praesentium harum tempore!</p>
                            <h5 className="mt-4 text-secondary">Service Hours</h5>
                            <h5 className="mt-2 text-danger">7:00 AM - 8:00 PM</h5>
                        </div>
                    </Grid>
                </Grid>
 </div>

这些项目的重叠宽度约为1000 at：

项目重叠

有人知道为什么会发生这种事，以及如何解决吗？

Answer 1

第一个网格元素中的图像正在溢出。你需要给maxWidth: 100%。您可以根据MUI使用任何首选的方式来对其进行样式设置。

以下是码箱的工作代码

​

import React from "react";
import ReactDOM from "react-dom";
import { Grid } from "@material-ui/core";

function App() {
  return (
    <div className="mx-md-4 my-5 mx-sm-0 mx-xs-0 flex-column align-items-center d-flex justify-content-center ">
      <Grid className="mt-3" container spacing={2} md={12}>
        <Grid className="mt-4" item md={4} sm={12} xs={12}>
          <img
            src="https://cdn.vox-cdn.com/thumbor/PElDiTTBj78Dr2d9JH-nwYhQl5s=/0x0:2040x1360/1820x1213/filters:focal(857x517:1183x843):format(webp)/cdn.vox-cdn.com/uploads/chorus_image/image/69587844/acastro_210104_1777_google_0001.0.jpg"
            className="rounded"
            style={{ maxWidth: "100%" }}
            alt=""
          />
        </Grid>
        <Grid className="mt-4" item md={8} sm={12} xs={12}>
          <div className="container d-flex">
            <h3 className=" mt-4 mb-5">
              <strong>Lorem Ipsum</strong>
            </h3>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit.
              Temporibus eum provident alias, ipsa unde quidem perferendis
              inventore harum quibusdam placeat odit architecto ad deserunt
              dignissimos vero ipsam voluptates? Excepturi magnam eveniet odit!
              Quam numquam culpa eaque vel, cupiditate expedita harum, labore
              explicabo molestiae molestias fuga laboriosam, itaque sed incidunt
              soluta eos repellat autem repudiandae praesentium. Consectetur
              esse praesentium harum tempore!
            </p>
            <h5 className="mt-4 text-secondary">Service Hours</h5>
            <h5 className="mt-2 text-danger">7:00 AM - 8:00 PM</h5>
          </div>
        </Grid>
      </Grid>
    </div>
  );
}

ReactDOM.render(<App />, document.querySelector("#app"));

​