如何为react-alice-carousel轮播项添加间距？

方案一：给轮播项包裹外层容器（推荐） #

直接给每个轮播项套一层带间距的容器，既能保证间隙生效，又不会干扰组件的autoWidth计算逻辑，是最稳妥的方案。

代码修改示例： #

const LatestHotels = () => {
  // 给每个CardPrimary外层添加带右侧间距的容器
  const items = [
    <div style={{ marginRight: '24px' }}>
      <CardPrimary
        title="Premium Hotel Plaza"
        description="Sed interdum metus at nisi tempor laoreet. Integer gravida orci
                  a justo sodales."
        location="27th Brooklyn New York, USA"
        rating="4.1"
        price={105}
      />
    </div>,
    <div style={{ marginRight: '24px' }}>
      <CardPrimary
        title="Premium Hotel Plaza"
        description="Sed interdum metus at nisi tempor laoreet. Integer gravida orci
                  a justo sodales."
        location="27th Brooklyn New York, USA"
        rating="4.1"
        price={105}
      />
    </div>,
    // 其他轮播项同理
  ];

  // 若开启infinite循环，需给最后一项去掉右侧间距避免衔接空白
  // 假设从数组生成items，可通过索引判断：
  // const items = hotelList.map((hotel, idx) => (
  //   <div style={{ marginRight: idx === hotelList.length -1 ? '0' : '24px' }}>
  //     <CardPrimary {...hotel} />
  //   </div>
  // ));

  return (
    <div className={LatestHotelsStyles.mainContainer}>
      <Header
        title="Popular Destination"
        subTitle="Explore some of the best tips from around the city from our partners and friends."
      />
      <AliceCarousel
        infinite
        mouseTracking
        items={items}
        autoPlay
        autoWidth
        disableDotsControls
        autoPlayInterval={4000}
        renderNextButton={() => <div className={LatestHotelsStyles.carouselNextBtn}>></div>}
        renderPrevButton={() => <div className={LatestHotelsStyles.carouselPrevBtn}><</div>}
      />
    </div>
  );
};

如果使用CSS Modules，可定义复用类：

/* LatestHotelsStyles.module.css */
.carouselItemWrapper {
  margin-right: 24px;
}
.carouselItemWrapper:last-child {
  margin-right: 0;
}

然后在组件中引用：

<div className={LatestHotelsStyles.carouselItemWrapper}>
  <CardPrimary {...props} />
</div>

方案二：强制覆盖组件内置样式 #

若不想额外套容器，可通过提高CSS选择器优先级，覆盖组件内置的.alice-carousel__item类样式：

/* 利用父容器类提升优先级，必要时用!important强制覆盖 */
.LatestHotelsStyles_mainContainer .alice-carousel__item {
  margin-right: 24px !important;
}
/* 移除最后一项的间距 */
.LatestHotelsStyles_mainContainer .alice-carousel__item:last-child {
  margin-right: 0 !important;
}

注意：该方案依赖组件内置类名，若组件版本更新修改类名可能失效，稳定性不如方案一。

方案三：调整CardPrimary组件本身样式 #

如果CardPrimary是自定义组件，可直接在组件内部添加右侧margin或左右padding，实现间隙效果：

// CardPrimary组件示例
const CardPrimary = ({ title, description, location, rating, price }) => {
  return (
    <div style={{ marginRight: '24px', padding: '0 8px' }}>
      {/* 组件原有内容 */}
      <h3>{title}</h3>
      <p>{description}</p>
      {/* 其他元素 */}
    </div>
  );
};

该方案适合所有使用CardPrimary的场景都需要间距的情况，若仅轮播场景需要，优先选择方案一。

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