2

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

DoneDeal0
  • 5,273
  • 13
  • 55
  • 114

1 Answers1

5

This is working, but you need the !important to override the Slider style

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

https://codesandbox.io/s/summer-glitter-568yj?file=/src/App.js:901-987

Striped
  • 2,544
  • 3
  • 25
  • 31
  • Cool! Juts a last question, would you know why my custom arrow doesn't take the onClick event when I add an absolute position to it? – DoneDeal0 Nov 07 '20 at 17:34
  • Hum.. not really, this is weird that some style disabled some behaviours on your button though. – Striped Nov 07 '20 at 17:51