使用CSS选择器在Next.js/React和FullPage.js中创建单页面应用
P粉476547076
P粉476547076 2024-01-16 14:18:40
0
1
440

我在我的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;

P粉476547076
P粉476547076

全部回复(1)
P粉968008175

我找到了一个答案,

我只是在useEffect()中添加了一个带有DOM的查询选择器

看下面的代码

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;
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板