Créez des applications d'une seule page dans Next.js/React et FullPage.js à l'aide des sélecteurs CSS
P粉476547076
P粉476547076 2024-01-16 14:18:40
0
1
439

J'utilise une bibliothèque appelée FullPage.js (https://github.com/alvarotrigo/react-fullpage) dans mon projet Next.js. Ils ont une classe CSS existante que je souhaite remplacer pour les points secondaires. Cependant, je souhaite uniquement remplacer le CSS pour une page, et c'est le sélecteur CSS suivant. Comment puis-je faire cela?

Merci d'avance pour votre aide !

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;

P粉476547076
P粉476547076

répondre à tous(1)
P粉968008175

J'ai trouvé une réponse,

Je viens d'ajouter un sélecteur de requête avec DOM dans useEffect()

Regardez le code ci-dessous

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;
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal