使用CSS選擇器在Next.js/React和FullPage.js中建立單一頁面應用
P粉476547076
P粉476547076 2024-01-16 14:18:40
0
1
450

我在我的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;
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板