它对我的工作CSS的变化

.slick-prev {
  left: 3% !important;
  z-index: 1;
}
.slick-next {
  right: 3% !important;
  z-index: 1;
}

幻灯片的数量和slidesToShow的设置是很重要的，在你的例子中，你只有4张幻灯片，而它被设置为一次显示4张幻灯片;因此不需要箭头。
将slidesToShow设置为小于幻灯片数，即一次设置1张，组件将相应地做出响应。

render() {
var settings = {
  dots: true,
  slidesToShow: 1, //if this is less than # of slides, arrows and dots will appear
};

https://codesandbox.io/s/q9o85r7xz6

从文档中，您可以编写自定义箭头

function SampleNextArrow(props) {
  const { className, style, onClick } = props;
  return (
    <div
      className={className}
      style={{ ...style, display: "block", background: "red" }}
      onClick={onClick}
    />
  );
}

function SamplePrevArrow(props) {
  const { className, style, onClick } = props;
  return (
    <div
      className={className}
      style={{ ...style, display: "block", background: "green" }}
      onClick={onClick}
    />
  );
}

然后将它们添加到设置中

const settings = {
      dots: true,
      infinite: true,
      slidesToShow: 3,
      slidesToScroll: 1,
      nextArrow: <SampleNextArrow />,
      prevArrow: <SamplePrevArrow />
    };

检查here文档。
一个重要的注意事项是，如果你正在使用react材料，不要将style更改为sx，否则它不会显示，下面是它应该如何显示

function SampleNextArrow(props) {
  const { className, style, onClick } = props
  return (
    <Box
      className={className}
      style={{ ...style, display: 'block', background: 'red' }}
      onClick={onClick}
    />
  )
}

您需要在导入自定义样式文件之前导入这两个文件。唯一的问题是以上两个文件会覆盖您的自定义样式：

import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

然后通过检查元素并在样式表中工作来获取类。在我的例子中，它是有效的。

给予这个CSS显示箭头图标。

.slick-slider.slick-initialized {
  width: 100vw;
}
.slick-arrow.slick-prev {
  background: black;
}
.slick-arrow.slick-next {
  background: black;
}

.slick-prev:before,.slick-next:before {
  color: #1175b9;
}