如何移除react-multi-carousel轮播组件中的箭头按钮？

有三种常用方法可以移除组件里的箭头：

1. 通过组件props直接关闭 #

组件自带showArrows属性，设置为false就能直接隐藏箭头，这是最直接的方式：

import Carousel from 'react-multi-carousel';
import 'react-multi-carousel/lib/styles.css';

const MyCarousel = () => {
  const responsive = {
    desktop: { breakpoint: { max: 3000, min: 1024 }, items: 3 },
    tablet: { breakpoint: { max: 1024, min: 464 }, items: 2 },
    mobile: { breakpoint: { max: 464, min: 0 }, items: 1 }
  };

  return (
    <Carousel
      responsive={responsive}
      showArrows={false} // 隐藏箭头
    >
      <div>轮播项1</div>
      <div>轮播项2</div>
      <div>轮播项3</div>
    </Carousel>
  );
};

export default MyCarousel;

2. 自定义空箭头组件 #

如果需要更灵活的控制（比如部分场景隐藏），可以通过customLeftArrow和customRightArrow传入空组件：

<Carousel
  responsive={responsive}
  customLeftArrow={() => null}
  customRightArrow={() => null}
>
  {/* 轮播内容 */}
</Carousel>

3. 通过CSS强制隐藏 #

如果不想修改组件逻辑，也可以直接用CSS隐藏箭头元素，组件箭头的类名是react-multi-carousel-arrow：

.react-multi-carousel-arrow {
  display: none !important;
}

内容的提问来源于stack exchange，提问作者Killer