considere el siguiente código:
<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> Los elementos se superponen en alrededor de 1000px de ancho:
elementos superpuestos
alguien sabe porque pasa esto y como solucionarlo?
La imagen dentro del primer elemento de la cuadrícula se desborda. Debe dar maxWidth: 100% . Puede usar cualquier forma preferida para diseñar esto según MUI.
Aquí hay un código de trabajo en 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"));