Change css style by classname using styled component

Question

In my project, I am using styled Component and installed react-responsive-carousel . As carousel is too big ,I want to add max-height property in classname=carousel.

I tried this but it didn't worked.

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

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

How can I do that or if there is an easy way to customize. please let me know

When you say it didn't work are you saying you see your rule in the computed styled panel in the dev tools but that it didn't override anything in the .carousel class? Can you show more of those computed styles? — Drew Reese

Ignacio Elias Ignacio Elias · Accepted Answer · 2021-01-08T08:55:02

Okey so, you are using the wrong css selector.

This code here is trying going to apply the styles to the div Wrapper that also has a class of carousel

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

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

You can do 2 things, either select the class carousel inside the Wrapper and then use both the Wrapper and the Carousel components as you are using, like this.

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

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

Or you can extend the styles from Carousel without creating a Wrapper, like this.

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

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

Change css style by classname using styled component

1 Answers