如何在样式组件中覆盖React Slick类？

问题描述

我有一个React光滑的旋转木马，我尝试根据自己的喜好设计样式。我已经将Slider组件包装在一个样式化的组件中，但是我无法覆盖任何类的任何样式。

这是我写的：

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>
  );
}

它根本不起作用。如何解决？这也是一个沙盒，以防万一：https://codesandbox.io/s/cranky-noether-1hdhr?file=/src/App.js

解决方法

这是可行的，但是您需要!important来覆盖Slider样式

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

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