如何设置React Slick carrousel箭头的样式？

如何解决如何设置React Slick carrousel箭头的样式？

我试图创建一个旋转木马组件，该组件将占用父容器的宽度和高度的100％（应该可以全屏显示）。我添加了一个自定义箭头，但无法对其设置样式。

如何获得这样的结果？

这是我的代码和一个沙箱：

const ArrowLeft = (props) => (
  <button style={{background:"red",border: 0}} {...props} className={'prev'}>
    back
  </button>
);

const settings = {
  dots: true,infinite: true,speed: 1000,slidesToShow: 1,slidesToScroll: 1,autoplay: true,lazyLoad: true,centerMode: true,adaptiveHeight: true,fade: true,arrows: true,prevArrow: <ArrowLeft />,autoplaySpeed: 5000,className: "slides"
};

const images = [
  "https://static.toiimg.com/photo/72975551.cms","https://www.gettyimages.fr/gi-resources/images/500px/983794168.jpg","https://www.freedigitalphotos.net/images/img/homepage/394230.jpg"
];

const StyledSlider = styled(Slider)``;

const Image = styled.div`
  background-size: cover;
  background: ${(props) => `url(${props.src}) no-repeat center`};
  width: 100%;
  height: 500px; // how to add an auto 100% width?
`;


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

任何帮助将不胜感激！

解决方法

react-slick传递自己的样式，您可以将其传播到<Button>的样式对象中（请参阅：https://react-slick.neostack.com/docs/example/custom-arrows）。然后，您可以添加或覆盖所需的任何样式。

以下修复程序使用了代码沙箱中的代码（此处为工作分支：https://codesandbox.io/s/lucid-roentgen-bie3j?file=/src/App.js）。

const Arrow = ({ className,style,onClick }) => (
  <Button style={{...style,left: 0,backgroundColor: 'red'}} onClick={onClick} className={className}>
    <div>back</div>
  </Button>
);

const settings = {
  ...
  prevArrow: <Arrow />
};