0
516
VistasEl carrusel MUI no se muestra correctamente
Estoy tratando de hacer un carrusel que funcione con componentes MUI, el que encontré es este react-material-ui-carousel , pero por alguna razón no funciona correctamente (o tal vez, como de costumbre, estoy haciendo algo mal)
Así que esto es lo que tengo (y funciona)
import React from 'react' import Carousel from 'react-material-ui-carousel' import { Card } from '@mui/material' import CardMedia from '@mui/material/CardMedia'; import CityA from "./Images/CityA.jpg" import CityB from "./Images/CityB.jpg" function Item(props) { return ( <Card sx={{ width: "50%"}}> <CardMedia component="img" height="25%" image={props.item.img} /> </Card> ) } function Home() { var items = [ { img: CityA }, { img: CityB } ] return ( <Carousel > {items.map( (item, i) => <Item key={i} item={item} />)} </Carousel> ) } export default HomeEsta es la salida de ese código solo:
Como puede ver, funciona bien, sin embargo, si trato de agregarlo como parte de mi "Ruta", se rompe horriblemente.
import React, { useEffect, useState } from "react"; import {BrowserRouter as Router, Routes, Route } from "react-router-dom" import Header from "./Header"; import Home from "./Home"; function App() { return ( < div className="app" > <Router> <Routes> <Route path = "/" element={<Header/>}> <Route path = "/" element = {<Home/>} /> </Route> </Routes> </Router> </div > ); }exportar la aplicación predeterminada;
entonces se ve así:
¡Súper pequeño! incluso con 500% Zoom! como lo que acaba de pasar! cualquier ayuda/consejo o incluso otro método es bienvenido todo lo que quería hacer era un carrusel de imágenes: c
Demostración de trabajo aquí -> Demostración
Lo que me gustaría lograr ->
1 Respuestas
Responde la pregunta0
No establezca el tamaño del elemento en el elemento mismo, establezca el tamaño del contenedor de ese elemento.
Por ejemplo:
<OuterBox sx={{display: "flex", justifyContent: "center", flexGrow: 1}}> <InnerBox sx={{ width: "50%"}}> <ContainedElement /> </InnerBox> </OuterBox>Esto le dará un elemento centrado horizontalmente y puede cambiar el tamaño de InnerBox para cambiar el tamaño del elemento. La caja interior ocupa el 50 % del espacio de la caja exterior y el elemento contenido ocupa el 100 % de ese espacio
También tus rutas son extrañas, escribiste:
<Route path = "/" element={<Header/>}> <Route path = "/" element = {<Home/>} /> </Route>pero eso significa que su ruta predeterminada va a dos elementos diferentes. Lo intentaré:
<Route path="/header" element={<Header />} /> <Route path="/" element={<Home />} />También para el carrusel:
function Item(props) { return ( <Box sx={{display: "flex", justifyContent: "center"> <Card width: "50%"> <CardMedia component="img" image={props.item.img} /> </Card> </Box> ) } function Home() { var items = [ { img: CityA }, { img: CityB } ] return ( <Carousel> {items.map(( (item, i) => <Item key={i} item={item} />)} </Carousel> ) }Eso debería funcionar, pero no estoy seguro del tamaño original de las imágenes. Espero que ayude.