[react]antd走马灯设置左右箭头

划重点：
在设置了arrows={true}后，左右的icon也要加上去    prevArrow={<leftcircleoutlined />}、    nextArrow={<rightcircleoutlined />}，另外还要重写一下样式。

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Carousel } from "antd";
import { LeftCircleOutlined, RightCircleOutlined } from "@ant-design/icons";

function onChange(a, b, c) {
  console.log(a, b, c);
}

const contentStyle = {
  height: "160px",
  color: "#fff",
  lineHeight: "160px",
  textAlign: "center",
  background: "#364d79"
};

ReactDOM.render(
  <Carousel
    afterChange={onChange}
    arrows={true}
    prevArrow={<LeftCircleOutlined />}
    nextArrow={<RightCircleOutlined />}
  >
    <div>
      <h3 style={contentStyle}>1</h3>
    </div>
    <div>
      <h3 style={contentStyle}>2</h3>
    </div>
    <div>
      <h3 style={contentStyle}>3</h3>
    </div>
    <div>
      <h3 style={contentStyle}>4</h3>
    </div>
  </Carousel>,
  document.getElementById("container")
);

.ant-carousel .slick-prev,
.ant-carousel .slick-next,
.ant-carousel .slick-prev:hover,
.ant-carousel .slick-next:hover,
.ant-carousel .slick-prev:focus,
.ant-carousel .slick-next:focus {
  font-size: inherit;
  color: currentColor !important;
}