如何覆盖样式组件中的 React Slick 类？答案

【问题标题】：How to override React Slick classes in a styled-component?如何覆盖样式组件中的 React Slick 类？
【发布时间】：2021-02-20 02:48:45
【问题描述】：

我有一个 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

【问题讨论】：

标签： reactjs react-slick

【解决方案1】：

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

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

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

【讨论】：

酷！最后一个问题，你知道为什么我的自定义箭头在我添加绝对位置时不接受 onClick 事件吗？
嗯.. 不是真的，这很奇怪，虽然某些样式禁用了按钮上的某些行为。