Buat aplikasi satu halaman dalam Next.js/React dan FullPage.js menggunakan pemilih CSS

Question

Saya menggunakan perpustakaan bernama FullPage.js (https://github.com/alvarotrigo/react-fullpage) dalam projek Next.js saya. Mereka mempunyai kelas CSS sedia ada yang ingin saya gantikan untuk mata sampingan. Walau bagaimanapun, saya hanya mahu mengatasi CSS untuk satu halaman, dan ia adalah pemilih CSS berikut. Bagaimana saya melakukan ini?

Terima kasih terlebih dahulu atas bantuan anda!

global.css

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

Halaman1.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;

Halaman2.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;

Answer 1

Saya jumpa jawapan,

Saya baru sahaja menambah pemilih pertanyaan dengan DOM dalam useEffect()

Lihat kod di bawah

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;