How to override React Slick classes in a styled-component?

user_12768467 0
Viewed 3306

I have a React slick carrousel that I try to style to my convenience. I have wrapped the Slider component in a styled component, but I can't override any style of any classes.

Here is what I write:

const StyledSlider = styled(Slider)`
&.slick-list{
  padding:0;
}`;

export default function App() {
  return (
    <StyledSlider {...settings}>
      {images.map((image, i) => {
        return (
          <div key={i}>
            <Image src={image} alt="img" />
          </div>
        );
      })}
    </StyledSlider>
  );
}

It doesn't work at all. How to fix it? Here is also a sandbox just in case: https://codesandbox.io/s/cranky-noether-1hdhr?file=/src/App.js

react-slick reactjs
1 Answers
user_19859120
Related