It work for me with following css changes

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

I had the same issue that the arrows didn’t show. It turned out that my problem was about the position of the arrows. I added a css classname to the settings object and changed the posiiton of arrows. Below is my settings object and sass code.

var settings = {
                dots: true,
                infinite: true,
                speed: 1000,
                slidesToShow: 1,
                slidesToScroll: 1,
                autoplay: true,
                lazyLoad: true,
                centerMode: true,
                adaptiveHeight: true,
                fade: true,
                arrows: true,
                autoplaySpeed: 5000,
                className: 'slides'
};

This a seperate scss file:

.slides {
  position: relative;
  .slick-prev, .slick-next {
    position: absolute;
    top: 50%;
  }
  .slick-prev {
    left: 5%;
  }
  .slick-next {
    right: 5%;
  }
}

I had the same problem. It turned out to be due to the buttons using white font for the text, while I was using a white background. I fixed it using the method suggested by websilone, except changing ‘color’ instead of z-index.

wow !!! That worked for me too …@tarifrudrapur

A working fix

Step 1: Add a class to your settings object.

 const settings = {
    arrows: true,
    dots: true,
    infinite: false,
    speed: 500,
    slidesToShow: 5,
    nextArrow: <NextArrow />,
    prevArrow: <PrevArrow />,
    className: 'react__slick__slider__parent', <------ like this
	}

Step 2: Write custom css to override default styles.

	/* REACT SLICK ARROW CUSTOM CSS */
	  .react__slick__slider__parent {
	    position: relative;
	  }
	  
	  .react__slick__slider__parent .slick-prev,
	  .react__slick__slider__parent .slick-next {
	    position: absolute;
	    top: 50%;
	  }
	  .react__slick__slider__parent .slick-prev {
	    color: black;
	    z-index: 1;
	  }
	  .react__slick__slider__parent .slick-next {
	    border-radius: 50%;
	    color: black;
	    z-index: 1;
	  }
	  
	  .react__slick__slider__parent .slick-prev:before, .slick-next:before {
	    color: black;
	  }

I am also having the same issue with arrows. I can not move them properly.

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

Didn’t work for me

This worked for me , declaring custom arrow function like it shown in the doc,

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

function SamplePrevArrow(props) {
....
}

and add them in the settings:

const settings = {
      ....
      nextArrow: <SampleNextArrow />,
      prevArrow: <SamplePrevArrow />
    };

If you are using react material leave style as it is do not change it to sx, see the complete answer here https://stackoverflow.com/questions/54548121/the-arrows-does-not-showing-in-react-slick-with-4-and-more-photos/71725052#71725052