使用CSS选择器在Next.js/React和FullPage.js中创建单页面应用-PHP中文网问答

我在我的Next.js项目中使用了一个叫做FullPage.js的库（https://github.com/alvarotrigo/react-fullpage）。他们有一个现有的CSS类，我想要重写侧边的点。然而，我只想要重写一个页面的CSS，并且它是以下的CSS选择器。我该如何做呢？

提前感谢您的帮助！

global.css

#fp-nav > ul > li:last-child > a {
  display:none
}

Page1.jsx

import ReactDOM from "react-dom";
import "fullpage.js/vendors/scrolloverflow"; // 可选项。当使用scrollOverflow:true时
import ReactFullpage from "@fullpage/react-fullpage";

import "./global.css";

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

const Page1 = () => (
  <ReactFullpage
    navigation
    sectionsColor={["#282c34", "#ff5f45", "#0798ec"]}
    render={({ state, fullpageApi }) => {
      return (
        <div>
          <MySection content={"从第一页滑下来！"} />
          <MySection content={"继续前进！从第一页"} />
          <MySection content={"从第一页滑上去！"} />
        </div>
      );
    }}
  />
);

export default Page1;

Page2.jsx

import ReactDOM from "react-dom";
import "fullpage.js/vendors/scrolloverflow"; // 可选项。当使用scrollOverflow:true时
import ReactFullpage from "@fullpage/react-fullpage";

import "./global.css";

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

const Page2 = () => (
  <ReactFullpage
    navigation
    sectionsColor={["#282c34", "#ff5f45", "#0798ec"]}
    render={({ state, fullpageApi }) => {
      return (
        <div>
          <MySection content={"从第二页滑下来！"} />
          <MySection content={"继续前进！从第二页"} />
          <MySection content={"从第二页滑上去！"} />
        </div>
      );
    }}
  />
);

export default Page2;

import ReactDOM from "react-dom"; import ReactFullpage from "@fullpage/react-fullpage"; class MySection extends React.Component { render() { return ( <div className="section name1"> <h3>{this.props.content}</h3> </div> ); } } const FullpageWrapper = () => { React.useEffect(() => { //添加这一行代码就可以工作 :) document.querySelector(`#fp-nav > ul > li:last-child > a`).style.display = "none"; }, []); return ( <ReactFullpage className="name1" navigation sectionsColor={["yellow", "#ff5f45", "#0798ec"]} render={({ state, fullpageApi }) => { return ( <div> <MySection className="name1" content={"Slide down!"} /> <MySection className="name1" content={"Keep going!"} /> <MySection className="name1" content={"Slide up!"} /> </div> ); }} /> ); }; export default FullpageWrapper;