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

Question

我有一个 React slick carrousel，我尝试根据自己的方便设置样式。我已将 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

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

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

reactjs

react-slick