Bootstrap Carousel 组件导致空白页

Question

这可能是一些愚蠢的问题，但我被困在这里。

我创建了Header和Footer组件，它们工作正常。 我还创建了另一个名为Slider的组件，其中有Carousel组件。

由于我将Slider放在Header和Footer之间， App.js页面变成空白。 当我删除Slider内的Carousel组件并放置一些Container和Box时，页面返回Header | Box | Footer 。

这是来自 Bootstrap 网站的 Carousel 示例，我试图在我的工作中看到它：

import React from "react";
import { Container,Box } from "@mui/material";
import Carousel from 'react-bootstrap/Carousel';


function Slider() {

    return (
        <div>
            <Container sx={{  float: "left",}}>
                <Box sx={{ width: 300, height: 300, backgroundColor: 'blue', '&:hover': { width: 500, height: 500, backgroundColor: 'primary.secondry', opacity: [0.9, 0.8, 0.7],},}} />
            
            </Container>
        
            <Carousel>
                <Carousel.Item>
                    <img
                    className="d-block w-100"
                    src="holder.js/800x400?text=First slide&bg=373940"
                    alt="First slide"
                    />
                    <Carousel.Caption>
                    <h3>First slide label</h3>
                    <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
                    </Carousel.Caption>
                </Carousel.Item>
                <Carousel.Item>
                    <img
                    className="d-block w-100"
                    src="holder.js/800x400?text=Second slide&bg=282c34"
                    alt="Second slide"
                    />

                    <Carousel.Caption>
                    <h3>Second slide label</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                    </Carousel.Caption>
                </Carousel.Item>
                <Carousel.Item>
                    <img
                    className="d-block w-100"
                    src="holder.js/800x400?text=Third slide&bg=20232a"
                    alt="Third slide"
                    />

                    <Carousel.Caption>
                    <h3>Third slide label</h3>
                    <p>
                        Praesent commodo cursus magna, vel scelerisque nisl consectetur.
                    </p>
                    </Carousel.Caption>
                </Carousel.Item>
            </Carousel>
        </div>
    );
}

export default Slider;

这是 App.js

import React from "react";
import Header from "./Header";
import Footer from "./Footer";
import Slider from "./Slider";


function App() {
  return (
    <>

    
  <Header/>
  <Slider/>
  <Footer/>

    </>
  );
}

export default App;

Answer 1

为了react-bootstrap工作，需要在App.js中导入所需的样式表：

import 'bootstrap/dist/css/bootstrap.min.css';

但是Header和Footer中可能有其他原因导致这些不呈现。