我在我的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;
我找到了一个答案,
我只是在useEffect()中添加了一个带有DOM的查询选择器
看下面的代码