如何在React项目中自定义Splide JS的箭头样式？

方法一：通过classes选项添加自定义类名 #

你之前尝试的classes配置存在语法错误，正确写法是在options的classes对象中，为prev和next箭头指定包含默认类与自定义类的字符串：

<Splide 
  options={{ 
    type: "Loop", 
    perPage: 5, 
    perMove: 1, 
    gap: 30,
    classes: {
      prev: 'splide__arrow splide__arrow--prev custom-prev-arrow',
      next: 'splide__arrow splide__arrow--next custom-next-arrow',
    }
  }}
>
  {/* 轮播内容 */}
</Splide>

配置完成后，即可在Popular.css中通过自定义类名编写样式，示例如下：

.custom-prev-arrow, .custom-next-arrow {
  background: transparent;
  border: none;
  width: 40px;
  height: 40px;
}

.custom-prev-arrow::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  /* 替换为你的左箭头图标路径 */
  background-image: url('your-prev-arrow.svg');
  background-size: contain;
  background-repeat: no-repeat;
}

.custom-next-arrow::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  /* 替换为你的右箭头图标路径 */
  background-image: url('your-next-arrow.svg');
  background-size: contain;
  background-repeat: no-repeat;
}

方法二：完全自定义箭头组件（更灵活） #

若需要更精细的控制，可直接替换默认箭头组件，通过options的arrows选项传入自定义组件：

首先编写箭头组件：

const CustomArrow = ({ direction, onClick }) => {
  return (
    <button 
      className={`splide__arrow splide__arrow--${direction} custom-arrow`}
      onClick={onClick}
    >
      {/* 插入你需要的SVG图标或其他元素 */}
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        {direction === 'prev' ? (
          <path d="M15 18L9 12L15 6" stroke="#000" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
        ) : (
          <path d="M9 18L15 12L9 6" stroke="#000" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
        )}
      </svg>
    </button>
  );
};

随后在Splide中使用：

<Splide 
  options={{ 
    type: "Loop", 
    perPage: 5, 
    perMove: 1, 
    gap: 30,
    arrows: false, // 关闭默认箭头
  }}
>
  {/* 自定义箭头容器 */}
  <div className="splide__arrows">
    <CustomArrow direction="prev" onClick={(splide) => splide.go('-1')} />
    <CustomArrow direction="next" onClick={(splide) => splide.go('+1')} />
  </div>

  {/* 轮播内容 */}
  {PopularData.map((item, index) => (
    <SplideSlide key={index} className="popular-slide">
      {/* 你的slide内容 */}
    </SplideSlide>
  ))}
</Splide>

对应的CSS样式：

.splide__arrows {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  pointer-events: none;
}

.custom-arrow {
  pointer-events: all;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  border: none;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.custom-arrow:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

完整修改后的代码示例 #

结合你的现有代码，以下是使用第一种方法的完整代码：

import React from "react";
import "./Popular.css";
import { Splide, SplideSlide } from "@splidejs/react-splide";
import "@splidejs/splide/css";
import { PopularData } from "./PopularData";

export default function Popular() {
  return (
    <div className="popular-root">
      <div className="popular-container wide-wrap">
        <div className="popular-title">
          <h1>Popular now</h1>
          <a href="#" className="popular-title-catalog">
            <p>Catalog</p>
            <svg></svg>
          </a>
        </div>

        <Splide 
          options={{ 
            type: "Loop", 
            perPage: 5, 
            perMove: 1, 
            gap: 30,
            classes: {
              prev: 'splide__arrow splide__arrow--prev custom-prev-arrow',
              next: 'splide__arrow splide__arrow--next custom-next-arrow',
            }
          }}
        >
          {PopularData.map((item, index) => (
            <SplideSlide key={index} className="popular-slide">
              <div className="slide-container">
                <div className="popular-image-container">
                  <img src={item.image} alt="" />
                  <svg></svg>
                </div>
                <div className="popular-price-w-shopping-btn">
                  <h2>{item.price} ₽</h2>
                  <svg></svg>
                </div>
                <div className="popular-cloth-names">
                  <p>{item.title}</p>
                  <p>{item.description}</p>
                  <p>{item.sizes}</p>
                </div>
              </div>
            </SplideSlide>
          ))}
        </Splide>
      </div>
    </div>
  );
}

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