如何在Next.js/React+FullPage.js项目中仅为单页应用CSS选择器

要仅针对单个页面修改FullPage.js侧边导航点的样式，核心思路是给目标页面的FullPage容器添加自定义类名，通过类名限定CSS选择器的作用范围，避免全局样式污染。具体步骤如下：

1. 给目标页面的FullPage组件添加自定义容器类 #

以Page1.jsx为例，在ReactFullpage组件中添加containerClassName属性，指定一个唯一类名（比如page1-fullpage）：

// Page1.jsx
import ReactFullpage from "@fullpage/react-fullpage";
// 移除全局的global.css导入，改用页面专属样式或带限定类的全局样式

class MySection extends React.Component {
  render() {
    return (
      <div className="section">
        <h3>{this.props.content}</h3>
      </div>
    );
  }
}

const Page1 = () => (
  <ReactFullpage
    navigation
    containerClassName="page1-fullpage" // 添加自定义容器类
    sectionsColor={["#282c34", "#ff5f45", "#0798ec"]}
    render={({ state, fullpageApi }) => {
      return (
        <div>
          <MySection content="Slide down! from Page 1" />
          <MySection content="Keep going! from Page 1" />
          <MySection content="Slide up! from Page 1" />
        </div>
      );
    }}
  />
);

export default Page1;

2. 修改CSS选择器，限定作用范围 #

你可以选择两种样式编写方式：

方式一：全局CSS（带限定类） #

修改global.css中的选择器，加上自定义类前缀，样式仅作用于带有page1-fullpage类的FullPage容器：

/* global.css */
.page1-fullpage #fp-nav > ul > li:last-child > a {
  display: none;
}

方式二：Next.js CSS Modules（推荐） #

在Page1.jsx同目录下创建Page1.module.css，写入带限定类的样式：

/* Page1.module.css */
.fullpageContainer #fp-nav > ul > li:last-child > a {
  display: none;
}

然后在Page1.jsx中导入并使用该类：

// Page1.jsx
import styles from "./Page1.module.css";

// ...

const Page1 = () => (
  <ReactFullpage
    navigation
    containerClassName={styles.fullpageContainer} // 使用CSS Modules类
    sectionsColor={["#282c34", "#ff5f45", "#0798ec"]}
    // ...其他代码
  />
);

3. 清理不必要的全局样式导入 #

如果使用CSS Modules方案，记得从Page2.jsx中移除import "./global.css"，避免样式污染；若使用全局CSS方案，保留全局文件即可，样式只会对目标页面生效。

完成后，仅Page1的侧边导航最后一个点会被隐藏，Page2不受影响。

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