First question on StackOverflow.
I have a Next App and the Navbar is being imported in the _app.js file.
import Navbar from "../Components/Navbar";
function MyApp({ Component, pageProps }) {
return (
<>
<Navbar />
<Component {...pageProps} />
</>
);
}
The color of Navbar links is grey by default, which works fine on most pages with a light-colored background. However, on some pages, the color is not visible.
I am looking for a way to change the color of the Navbar links only when we are on a specific page. For example, when visiting the page http://localhost:3000/model3, the Navbar links should be white.
I am using the module approach for the Navbar and SASS as the CSS compiler with a Navbar.module.scss
Model3.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;
If there is anything else I should include, please let me know. Thank you.
Please note that all Navlinks in the Navbar are currently grey. To improve visibility, I need to change them to white specifically on this page.
Here is how the page looks like.