網格項目在材質 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 像素的寬度重疊：
項目重疊

有誰知道為什么會發生這種情況以及如何解決？

Answer 1

第一個網格元素內的圖像溢出。 你需要給maxWidth: 100% 。 您可以根據 MUI 使用任何首選方式來設置它的樣式。

這是codesandbox的工作代碼

 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"));