使用样式化组件按类名更改css样式

在我的项目中，我使用样式化的组件和安装的react responsive carousel。由于转盘太大，我想在classname=carousel中添加max height属性

我试过了，但没用

    const Wrapper = styled.div`
       &.carousel {
        max-height: 450px;
    }
`

    <Wrapper>
      <Carousel showThumbs={false} infiniteLoop={true} autoPlay>
       ................
      </Carousel>
    </Wrapper>

const Wrapper=styled.div`
&旋转木马{
最大高度：450像素；
}
`
................

---

我如何才能做到这一点，或者如果有一个简单的方法来定制。请让我知道

好吧，您使用了错误的css选择器

这里的代码试图将样式应用于div

包装器

，该包装器也有一个类

carousel

   const Wrapper = styled.div`
       &.carousel {
        max-height: 450px;
    }`

    <Wrapper>
      <Carousel showThumbs={false} infiniteLoop={true} autoPlay>
       ................
      </Carousel>
    </Wrapper>

或者您可以从

Carousel

扩展样式，而无需创建

包装器，如下所示

   const Wrapper = styled.div`
       .carousel {
        max-height: 450px;
    }`

    <Wrapper>
      <Carousel showThumbs={false} infiniteLoop={true} autoPlay>
       ................
      </Carousel>
    </Wrapper>

   const ExtendedCarousel = styled(Carousel)`
        max-height: 450px;
    `

      <ExtendedCarousel showThumbs={false} infiniteLoop={true} autoPlay>
       ................
      </ExtendedCarousel>

const ExtendedCarousel=styled（Carousel）`
最大高度：450像素；
`
................
当您说它不起作用时，您是说您在开发工具的“计算样式”面板中看到了您的规则，但它没有覆盖
.carousel
类中的任何内容？您可以显示更多这些计算样式吗？