React多轮播组件（react-multi-carousel）在页面中不显示的问题求助

大家好，我最近在项目里用react-multi-carousel做轮播功能时碰上个棘手问题：轮播组件完全不显示在浏览器里。我用Edge开发者工具查元素，连轮播的DOM节点都找不到，而且浏览器控制台也没抛出任何报错，这让我根本没法定位问题出在哪。

我已经做了这些排查：

• 确认MUI的IconButton、Box、Typography等组件都导入正确
• 检查了元素上的CSS样式，看起来没什么明显问题
• 已经装了项目需要的依赖：MUI相关包、react-multi-carousel以及它对应的样式文件

下面是我的组件代码，麻烦大家帮忙看看有没有哪里出错了？比如CSS导入、图片加载或者轮播配置的问题？

import { IconButton, Box, Typography, useMediaQuery } from "@mui/material";

import "react-responsive-carousel/lib/styles/carousel.min.css";

import NavigateBeforeIcon from "@mui/icons-material/NavigateBefore";
import NavigateNextIcon from "@mui/icons-material/NavigateNext";

import { shades } from "../../theme";

import Carousel from 'react-multi-carousel';
import 'react-multi-carousel/lib/styles.css';

const importAll = (r) =>
  r.keys().reduce((acc, item) => {
    acc[item.replace("./", "")] = r(item);
    return acc;
  }, {});

export const heroTextureImports = importAll(
  require.context("../../assets", false, /\.(png|jpe?g|svg)$/)
);

const MainCarousel = () => {
  const isNonMobile = useMediaQuery("(min-width:600px)");

  return (
    <Carousel
      infiniteLoop={true}
      showThumbs={false}
      showIndicators={false}
      showStates={false}
      renderArrowPrev={(onclickHandler, hasPrev, lable) => (
        <IconButton
          onClick={onclickHandler}
          sx={{
            position: "absolute",
            top: "50%",
            left: "0",
            color: "white",
            padding: "50px",
            zIndex: "10",
          }}
        >
          <NavigateBeforeIcon sx={{ fontSize: 40 }} />
        </IconButton>
      )}
      renderArrowNext={(onclickHandler, hasNext, lable) => (
        <IconButton
          onClick={onclickHandler}
          sx={{
            position: "absolute",
            top: "50%",
            right: "0",
            color: "white",
            padding: "50px",
            zIndex: "10",
          }}
        >
          <NavigateNextIcon sx={{ fontSize: 40 }} />
        </IconButton>
      )}
    >
      {Object.values(heroTextureImports).map((texture, index) => {
        try {
          return (
            <Box key={`carousel-image-${index}`}>
              <img
                src={texture}
                alt={`carousel-${index}`}
                style={{
                  width: "100%",
                  height: "700px",
                  objectFit: "cover",
                  backgroundAttachment: "fixed",
                }}
              />
              <Box
                color="white"
                padding="20px"
                borderRadius="1px"
                textAlign="left"
                backgroundColor="rgb(0, 0, 0, 0.4)"
                position="absolute"
                top="46%"
                left={isNonMobile ? "10%" : "0"}
                right={isNonMobile ? undefined : "0"}
                margin={isNonMobile ? undefined : "0 auto"}
                maxWidth={isNonMobile ? undefined : "240px"}
              >
                <Typography color={shades.secondary[200]}>
                  -- New Items
                </Typography>
                <Typography variant="h1">summer sales</Typography>
                <Typography
                  fontWeight="bold"
                  color={shades.secondary[300]}
                  sx={{ textDecoration: "underline" }}
                >
                  Discover More
                </Typography>
              </Box>
            </Box>
          );
        } catch (error) {
          console.error(`Error rendering carousel image at index ${index}:`, error);
          return null;
        }
      })}
    </Carousel>
  );
};

export default MainCarousel;

备注：内容来源于stack exchange，提问作者Dawit sileshi