如何在样式化组件中重写React Slick类？

Question

我有一个反应圆滑的旋转木马，我试图根据我的方便样式。我已经将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

Answer 1

这是有效的，但您需要!important来覆盖滑块样式

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

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