React Slick Carousel箭头尺寸设置问题求助

React Slick的自定义箭头不会直接继承图标组件的size属性，原因是Slick会给箭头容器添加默认样式，且Lucid React图标自定义数值尺寸时，仅靠size属性往往无法生效，需要通过CSS样式或组件的style/className来控制。

以下是具体解决方案：

方法1：内联样式直接控制尺寸 #

给箭头容器和Lucid图标分别设置内联样式，同时覆盖Slick箭头容器的默认布局样式：

import { ChevronLeft, ChevronRight } from '@lucidchart/lucid-react';
import Slider from 'react-slick';

const CustomPrevArrow = ({ onClick }) => (
  <div 
    className="slick-prev" 
    onClick={onClick} 
    style={{ width: '40px', height: '40px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
  >
    <ChevronLeft style={{ width: '30px', height: '30px', color: '#333' }} />
  </div>
);

const CustomNextArrow = ({ onClick }) => (
  <div 
    className="slick-next" 
    onClick={onClick} 
    style={{ width: '40px', height: '40px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
  >
    <ChevronRight style={{ width: '30px', height: '30px', color: '#333' }} />
  </div>
);

// Slider配置
const sliderSettings = {
  prevArrow: <CustomPrevArrow />,
  nextArrow: <CustomNextArrow />,
  // 其他轮播配置项
};

<Slider {...sliderSettings}>
  {/* 轮播内容 */}
</Slider>

方法2：CSS类名批量控制 #

给箭头容器和图标添加自定义类名，通过全局CSS设置样式：

// 自定义箭头组件
const CustomPrevArrow = ({ onClick }) => (
  <div className="custom-slick-arrow custom-slick-prev" onClick={onClick}>
    <ChevronLeft className="custom-arrow-icon" />
  </div>
);

const CustomNextArrow = ({ onClick }) => (
  <div className="custom-slick-arrow custom-slick-next" onClick={onClick}>
    <ChevronRight className="custom-arrow-icon" />
  </div>
);

// CSS样式
.custom-slick-arrow {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 可按需覆盖Slick默认的定位、边距样式 */
}

.custom-arrow-icon {
  width: 30px !important; /* 若Lucid图标有默认内联样式，需用!important强制覆盖 */
  height: 30px !important;
  color: #333;
}

关键提示 #

• Lucid React图标的size属性通常仅支持预设的枚举值（如small/medium/large），自定义数值尺寸时，直接设置宽高样式更可靠。
• 注意检查React Slick给箭头容器默认添加的position、z-index等样式，避免箭头位置偏移或被内容遮挡。

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