Apply CSS selectors only for 1 page with Next.js/React and FullPage.js

SpicyyRiice 0
Viewed 29

I am using a library called FullPage.js (https://github.com/alvarotrigo/react-fullpage) on my Next.js project. They have an existant CSS class and I'd like to override the dots on the side. However, I wanna to override the css for only ONE PAGE and it's the following CSS Selector. How do I do it?

Help and thanks in advance!

global.css

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

Page1.jsx

import ReactDOM from "react-dom";
import "fullpage.js/vendors/scrolloverflow"; // Optional. When using 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={"Slide down! from Page 1"} />
          <MySection content={"Keep going! from Page 1"} />
          <MySection content={"Slide up! from Page 1"} />
        </div>
      );
    }}
  />
);

export default Page1;

Page2.jsx

import ReactDOM from "react-dom";
import "fullpage.js/vendors/scrolloverflow"; // Optional. When using 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={"Slide down! from Page 2"} />
          <MySection content={"Keep going! from Page 2"} />
          <MySection content={"Slide up! from Page 2"} />
        </div>
      );
    }}
  />
);

export default Page2;
fullpage.js css-selectors next.js reactjs css
1 Answers

I found an answer,

I just added an query selector with DOM in a useEffect()

Look at the code below

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(() => {        //ADD THIS AND IT WILL WORK :)
    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;
SpicyyRiice0
Related