title: How to override React Slick classes in a styled-component?
body: <p>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.</p>
  <p>Here is what I write:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const StyledSlider = styled(Slider)`
  &amp;.slick-list{
    padding:0;
  }`;
  
  export default function App() {
    return (
      &lt;StyledSlider {...settings}&gt;
        {images.map((image, i) =&gt; {
          return (
            &lt;div key={i}&gt;
              &lt;Image src={image} alt="img" /&gt;
            &lt;/div&gt;
          );
        })}
      &lt;/StyledSlider&gt;
    );
  }</code></pre>
  </div>
  </div>
  </p>
  <p>It doesn't work at all. How to fix it? Here is also a sandbox just in case: <a href="https://codesandbox.io/s/cranky-noether-1hdhr?file=/src/App.js" rel="nofollow noreferrer">https://codesandbox.io/s/cranky-noether-1hdhr?file=/src/App.js</a></p>