--sgds-nav-link-color is not defined

[clye-cog]

Prerequisites

• I have searched for duplicate or closed issues
• I have read the contributing guidelines

Describe the issue

Somehow, getting an error with --sgds-nav-link-color is not defined is not defined. When we try to implement the .nav class, it the variable works. Is it something we missed on our end?

Recording:

styling-sgds_nav.mp4

What operating system(s) are you seeing the problem on?

macOS

What browser(s) are you seeing the problem on?

Chrome

Describe your frontend stack. What version of React and @govtechsg/sgds-react are you using? CSR or SSR?

NextJS, typescript, react. sgds v2.7.3

[clukhei]

@clye-cog .nav-link class selector should only be used as a child of .nav. The .nav css selector defines the value of css variable --sgds-nav-link-color, without .nav parent the variable will have no value when using .nav-link alone.

meaning you will need to

<Nav>
<Nav.Link></Nav.Link> 
</Nav> 

however, this case seems like a standalone link instead of being part of a navigation group (Nav is usually for a group of links), you can directly use <a href=...> </a> and it will have the sgds link color.

if u decide to use Nav and Nav.Link , then please wait for me to do an update to the next patch version for a small UI fix.

[clye-cog]

Ah okay thanks for explaining! We'll just go ahead to use <a href=...> </a>