React Scroll Magic SectionWipes出现多余内边距，如何移除？

以下是几个可行的解决方法，根据你的场景选择：

1. 用全局CSS精确覆盖样式 #

通过浏览器开发者工具定位到产生底部padding的具体DOM元素，然后用更精确的CSS选择器强制覆盖样式：

• 若给组件套了自定义父容器，可通过父容器定位目标元素：

/* 假设父容器class为section-wipes-wrapper */
.section-wipes-wrapper > div:first-child {
  padding-bottom: 0 !important;
}

• 若目标元素有固定类名（开发者工具中可查看）：

.scrollmagic-section-inner { /* 替换为实际类名 */
  padding-bottom: 0 !important;
}

优先用精确选择器缩小影响范围，!important仅在组件样式优先级更高时使用。

2. 用React useEffect手动修改DOM样式 #

在父组件中通过ref获取组件容器，定位到目标元素后直接修改内联样式，无需依赖类名：

import { useEffect, useRef } from 'react';
import SectionWipes2 from './path/to/SectionWipes2';

export default function YourPage() {
  const wipesContainerRef = useRef(null);

  useEffect(() => {
    if (!wipesContainerRef.current) return;
    // 替换为开发者工具中找到的目标元素选择器
    const targetEl = wipesContainerRef.current.querySelector('[data-scrollmagic-el]');
    if (targetEl) {
      targetEl.style.paddingBottom = '0';
    }
  }, []);

  return (
    <div ref={wipesContainerRef}>
      <SectionWipes2 />
    </div>
  );
}

3. 直接修改组件源码（最彻底） #

将SectionWipes2.js的代码复制到你项目的本地文件中，找到设置底部padding的代码段（比如style属性中的paddingBottom），直接将值改为0或删除该属性。这种方法无需额外样式或DOM操作，完全可控。

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