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

Question

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;

Answer 1

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;