react-material-ui-carousel接入React Router后尺寸异常过小如何修复？

我想要实现适配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

以上代码单独运行时效果正常，但当我将该组件作为路由页面接入React Router后，显示完全异常，相关代码如下：

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

export default App;

接入路由后轮播尺寸变得极小，即使放大500%也无法正常查看，我期望实现适配MUI的正常轮播效果。

1. React Router v6的嵌套路由规则要求，父路由对应的组件必须渲染<Outlet />组件才能加载子路由的内容，你使用的<Header />作为父路由组件没有添加<Outlet />，导致子路由<Home />的渲染容器没有正常的宽高基准，百分比单位无法正常计算。
2. 你给CardMedia设置的height: "25%"是相对父元素的百分比高度，父容器Card没有设置固定高度的前提下，百分比高度会直接塌陷，导致内容尺寸异常。

步骤1：修改Header组件，添加Outlet #

在Header组件的合适位置引入并渲染<Outlet />，用来承载子路由的内容：

import { Outlet } from 'react-router-dom'
// 你的其他Header相关导入

export default function Header() {
  return (
    <>
      {/* 你的原有Header导航、标题等代码 */}
      <Outlet />
    </>
  )
}

步骤2：修正轮播组件的尺寸设置 #

将相对单位替换为有明确基准的尺寸值，比如给CardMedia设置固定高度，或者给外层Carousel设置固定高度：

function Item(props)
{
    return (
        <Card sx={{ width: "50%", margin: "0 auto" }}>
          <CardMedia
            component="img"
            height="200" // 替换为固定像素值
            image={props.item.img}
            alt="轮播图片"
          />
        </Card>
    )
}

// 也可以给外层Carousel设置高度
function Home() {
  // 原有代码
  return (
    <Carousel sx={{ height: "60vh" }}>
      {items.map( (item, i) => <Item key={i} item={item} />)}
    </Carousel>
  )
}

• 可以使用MUI官方生态的SwipeableViews结合MobileStepper组件自定义轮播，适配性更高
• 可以选择mui-carousel组件，是专门针对MUI设计的轮播组件，API更贴合MUI的设计规范

内容的提问来源于stack exchange，提问作者React Enjoyer