如何实现react-fast-marquee组件内logo的等间距排列

当前间距异常的核心原因是布局写法和react-fast-marquee的组件逻辑不匹配：

1. 你把5个logo包裹在单个grid容器中作为唯一子元素传入Marquee，组件做无缝滚动复制时是整块复制这个grid容器，会导致首尾衔接处的间距不受grid的gap控制，出现空隙异常
2. 没有给所有logo设置统一的占位尺寸约束，不同logo原始宽高比不一致，即使grid列gap固定，视觉上也会出现间距忽大忽小的问题
3. 额外添加的pr-16右内边距会进一步放大首尾衔接处的空隙差

直接调整现有代码配置即可，不需要逐个修改logo源文件：

• 移除包裹logo的单个grid容器，把每个logo作为独立子元素直接传入Marquee组件
• 用Marquee组件自带的gap参数统一控制所有logo（包括滚动衔接处）的间距，替代自己写的grid gap
• 给每个logo外层加统一高度的容器，约束所有logo的视觉高度一致，宽度自适应，避免尺寸差导致的观感不均
• 删除多余的单边内边距pr-16

修正后的可直接运行代码：

import Marquee from 'react-fast-marquee'
import Icon from './icons'

const PartnerRunningLine = () => (
  <div className="absolute bottom-0 left-[-2px] right-[-2px] transform translate-y-[48px] overflow-x-clip overflow-y-visible">
    <div className="text-white bg-background-partners transform rotate-[-2deg] scale-[1.001]">
      {/* gap值和原来的gap-20（80px）保持一致，可根据需要调整 */}
      <Marquee pauseOnHover gradient={false} speed={40} gap={80}>
        <div className="py-[25px] h-10 flex items-center">
          <Icon iconName="oasisSB" className="h-full w-auto" />
        </div>
        <div className="py-[25px] h-10 flex items-center">
          <Icon iconName="coinsquare" className="h-full w-auto" />
        </div>
        <div className="py-[25px] h-10 flex items-center">
          <Icon iconName="tetra" className="h-full w-auto" />
        </div>
        <div className="py-[25px] h-10 flex items-center">
          <Icon iconName="researchCapital" className="h-full w-auto" />
        </div>
        <div className="py-[25px] h-10 flex items-center">
          <Icon iconName="pfaff" className="h-full w-auto" />
        </div>
      </Marquee>
    </div>
  </div>
)

export default PartnerRunningLine

补充说明：如果你的Icon组件不支持接收className属性，只需要保证外层包裹div的高度统一即可，不需要额外修改Icon组件内部代码。如果个别logo因为图形设计原因视觉上偏紧凑/宽松，单独给对应logo的外层容器加少量左右内边距微调即可。

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