当 Navbar 在不同的组件中呈现时，如何更改 Navbar 中文本的颜色？

Question

StackOverflow 上的第一个问题。

所以，我有一个下一个应用程序，导航栏被导入到 _app.js 中。

import Navbar from "../Components/Navbar";

function MyApp({ Component, pageProps }) {
  return (
    <>
      <Navbar />
      <Component {...pageProps} />
    </>
  );
}

颜色或导航栏链接是灰色的，因此当它在大多数页面上呈现时效果很好，因为 BG 是浅色的。 但是，在某些页面中，导航时颜色是不可见的。

所以，我想知道是否只有当我们在该页面上时才能更改导航栏链接的颜色。 例如，当我们访问页面 :: http://localhost:3000/model3 时，导航栏链接的颜色应该是白色的。 我在 Navbar 上使用模块方法，并使用 sass 作为带有 Navbar.module.scss 的 CSS 编译器

模型3.js

    import React from "react";
    import section from "../styles/section.module.css";
    import S from "../styles/models.module.css";
    import E from "../styles/model3.module.css";
    import Link from "next/link";
    import Head from "next/head";
    import { Fade } from "react-reveal";

    function model3() {
      return (
        <div>
  <Head SameSite="None">
    <title>Model 3 | Tesla</title>
    <link
      rel="icon"
      href="https://www.tesla.com/themes/custom/tesla_frontend/assets/favicons/favicon.ico"
    />
  </Head>

  <div className={S.Wrapper}>
    <div className={S.Maincontainer}>
      <div className={S.Container}>
        <div className={E.TopSection}>
          <Fade bottom>
            <div className={section.carname}>
              <div className={section.title}>
                <h2 style={{ color: "white" }}>Model 3</h2>
              </div>
            </div>
          </Fade>
          <Fade bottom>
            <div className={E.Details}>
              <div className={S.DetailsContainer}>
                <div className={S.DetailsHeading}>
                  <h3>3.1 s</h3>
                </div>
                <div className={S.DetailsData}>0-60 mph*</div>
              </div>
              <div className={S.DetailsContainer}>
                <div className={S.DetailsHeading}>
                  <h3>358 mi</h3>
                </div>
                <div className={S.DetailsData}>Range (EPA est.)</div>
              </div>
              <div className={S.DetailsContainer}>
                <div className={S.DetailsHeading}>
                  <h3>AWD</h3>
                </div>
                <div className={S.DetailsData}>Dual Motor</div>
              </div>
              <div className={S.DetailsContainer}>
                <Link href="">
                  <span>Order Now</span>
                </Link>
              </div>
            </div>
          </Fade>
        </div>
      </div>
    </div>
  </div>
</div>);}
    export default model3;

如果有什么我应该包括的，请告诉我。 谢谢你。

请检查顶部，导航栏中的所有导航链接都是灰色的，我需要在呈现此页面时将它们全部更改为白色，以便它们可见

页面看起来像这样

Answer 1

有很多方法可以做到这一点：

你可以使用你的路由钩子，React Router 有 useLocation()，你可以验证位置并设置一个类来修改基于路径的行为。
您可以将道具发送到您的导航栏
您可以根据路线为正文设置一个类，然后使用 css .dark .navbar定位您的导航栏

最好的方法取决于你的项目结构

当 Navbar 在不同的组件中呈现时，如何更改 Navbar 中文本的颜色？

问题描述

1 个解决方案

解决方案1
0 2022-07-21 12:04:12

当 Navbar 在不同的组件中呈现时，如何更改 Navbar 中文本的颜色？

问题描述

1 个解决方案

解决方案1 0 2022-07-21 12:04:12

解决方案1
0 2022-07-21 12:04:12