国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

使用CSS選擇器在Next.js/React和FullPage.js中創(chuàng)建單頁(yè)面應(yīng)用
P粉476547076
P粉476547076 2024-01-16 14:18:40
0
1
618

我在我的Next.js項(xiàng)目中使用了一個(gè)叫做FullPage.js的庫(kù)(https://github.com/alvarotrigo/react-fullpage)。他們有一個(gè)現(xiàn)有的CSS類,我想要重寫側(cè)邊的點(diǎn)。然而,我只想要重寫一個(gè)頁(yè)面的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"; // 可選項(xiàng)。當(dāng)使用scrollOverflow:true時(shí)
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={"從第一頁(yè)滑下來(lái)!"} />
          <MySection content={"繼續(xù)前進(jìn)!從第一頁(yè)"} />
          <MySection content={"從第一頁(yè)滑上去!"} />
        </div>
      );
    }}
  />
);

export default Page1;

Page2.jsx

import ReactDOM from "react-dom";
import "fullpage.js/vendors/scrolloverflow"; // 可選項(xiàng)。當(dāng)使用scrollOverflow:true時(shí)
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={"從第二頁(yè)滑下來(lái)!"} />
          <MySection content={"繼續(xù)前進(jìn)!從第二頁(yè)"} />
          <MySection content={"從第二頁(yè)滑上去!"} />
        </div>
      );
    }}
  />
);

export default Page2;

P粉476547076
P粉476547076

全部回復(fù)(1)
P粉968008175

我找到了一個(gè)答案,

我只是在useEffect()中添加了一個(gè)帶有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;
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板