如何禁止react-fullpage组件默认将内容居中对齐？

• 该组件的默认全局内容垂直居中行为由配置项verticalCentered控制，其默认值为true，将该配置项设为false即可完全关闭默认居中特性。示例代码如下：

import ReactFullpage from '@fullpage/react-fullpage';

const Page = () => {
  return (
    <ReactFullpage
      options={{
        // 关闭全局内容默认垂直居中
        verticalCentered: false,
        // 其他原有配置保留即可
        scrollingSpeed: 800
      }}
      render={({ fullpageApi }) => {
        return (
          <ReactFullpage.Wrapper>
            <div className="section">
              第一屏内容，将按照正常文档流排列，不再默认居中
            </div>
            <div className="section">
              第二屏内容
            </div>
          </ReactFullpage.Wrapper>
        );
      }}
    />
  );
};

export default Page;

• 如果你仅需要关闭某一个section的居中效果，不需要全局修改，可直接给对应的section元素添加自定义样式覆盖默认布局：

/* 给需要关闭居中的section添加custom-section类名即可 */
.custom-section {
  align-items: flex-start !important;
  padding-top: 20px; /* 可根据需要自定义顶部间距 */
}

提示：如果修改配置后未生效，可先清理浏览器缓存后重试，或通过浏览器开发者工具检查是否存在自定义样式和组件默认样式冲突。

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