Css 在React Slick渲染时幻灯片溢出

我不认为这是正常的行为或反应，但当初始化我的页面（通过地址栏）时，旋转木马看起来是这样的：

正如你们所看到的，在屏幕的右侧有一个棕色的条。 但当我调整浏览器窗口的大小时，它显示得很好

---

在渲染组件时，有什么方法可以防止这种情况发生吗？

我找出了导致组件出现这种行为的原因，我是这样定义幻灯片的高度的：

const heightCarousel = '80vh'

    <Slider {...settings}>
      <div style={{height:heightCarousel, background:'#F4CC67', padding:'15px 0', textAlign:'center'}}><h3>1</h3></div>
      <div style={{height:heightCarousel, background:'#AA8326', padding:'15px 0', textAlign:'center'}}><h3>2</h3></div>
    </Slider>

const heightCarousel='80vh'
1.
2.

而不是下面，它让React slick自动定义每张幻灯片的宽度：

    <Slider {...settings}>
           <div style={{background:'#F4CC67', textAlign:'center'}}><div><h2>TEST</h2></div></div>
           <div style={{background:'#AA8326', textAlign:'center'}}><h3>2</h3></div>
    </Slider>

试验
2.

---

请注意，您不能定义幻灯片内部的高度，否则您会遇到同样的问题，但您仍然可以使用填充来设置幻灯片内部内容的样式。

我认为这是正常的，我在使用

react slick

时也遇到了这一问题。你需要用样式来管理它。可以尝试添加一些填充，看看是否有效。