MUI 轮播显示不正确答案

【问题标题】：MUI Carousel not displaying properlyMUI 轮播显示不正确
【发布时间】：2022-07-09 03:09:06
【问题描述】：

我正在尝试制作一个与 MUI 组件一起使用的轮播，我发现的是这个 react-material-ui-carousel，但由于某种原因无法正常工作（或者可能像往常一样我做错了什么）

这就是我所拥有的（并且有效）

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 Home

这是单独的代码的输出：

如您所见，它运行良好，但是如果我尝试将其添加为我的“路线”的一部分，它会严重损坏

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

导出默认应用；

它看起来像这样：

超小！即使使用 500% 缩放！就像刚刚发生的一样！欢迎任何帮助/提示甚至其他方法我想做的只是图像轮播：c

在这里工作演示 -> Demo

我想达到什么->

【问题讨论】：

标签： javascript reactjs material-ui carousel

【解决方案1】：

不要在元素本身上设置元素的大小，设置那个元素的容器的大小。

例如：

<OuterBox sx={{display: "flex", justifyContent: "center", flexGrow: 1}}>
   <InnerBox sx={{ width: "50%"}}>
      <ContainedElement />
   </InnerBox>
</OuterBox>

这会给你一个水平居中的元素，你可以调整 InnerBox 的大小来改变元素的大小。内盒占外盒 50% 的空间，而你包含的元素占了 100% 的空间

你写的路线也很奇怪：

<Route path = "/" element={<Header/>}>
   <Route path = "/" element = {<Home/>} />
</Route>

但这意味着您的默认路径将指向两个不同的元素。我会尝试：

<Route path="/header" element={<Header />} />
<Route path="/" element={<Home />} />

也适用于轮播：

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


}

应该可以，但我不确定图片的原始大小。希望对您有所帮助。

【讨论】：