Carousel（纯 CSS 和 npms）在 ReactJS 中不能很好地显示

Question

我尝试在 react 中实现一个简单的轮播，我使用了纯 css 和库，但在所有情况下它总是显示如下

img of result

所有子元素都以垂直线显示。

我尝试了以下代码：

https://www.npmjs.com/package/react-responsive-carousel

https://www.npmjs.com/package/pure-react-carousel

总之结果是一样的，我在 css 类中没有样式

import React, {Component} from 'react';
import { CarouselProvider, Slider, Slide, ButtonBack, ButtonNext } 
 from 'pure-react-carousel';

class App extends Component {
render()  {
    return (
      <div className="App">
          <CarouselProvider
              naturalSlideWidth={30}
              naturalSlideHeight={10}
              totalSlides={3}
            >
              <Slide index={0}>
                  <img src="/img/Gallery01.png" />
              </Slide>
              <Slide index={1}>
                  <img src="/img/Gallery01.png" />
              </Slide>
              <Slide index={2}>
                  <img src="/img/Gallery01.png" />
              </Slide>
            </CarouselProvider>
      </div>
    );
  }
}
export default App;

Answer 1

从'pure-react-carousel'导入一些组件后，尝试在右上角添加此导入：

import 'pure-react-carousel/dist/react-carousel.es.css';