Menu
How does one add a css class to a Link component in Next.js?
<Link
className="app-subnav__link"
href="/globalSettings"
>
Settings overview
</Link>
It doesn't like the above! ES Link is throwing an error:
654
In Next. js, <Link> components generally go with <a> tags. To style a link, we don't directly add our CSS class names or inline styles to <Link>. Instead, we do that with the <a> tag.
When linking between pages on websites, you use the <a> HTML tag. In Next. js, you can use the Link Component next/link to link between pages in your application. <Link> allows you to do client-side navigation and accepts props that give you better control over the navigation behavior.
You can add the css file in head of nextjs. and in the render method, inside the return add a head tag similar to ordinary HTML, the head tag should be inside a div. also the css should be in static folder. Add a key to the link tag to reuse the css in multiple pages.
Adding Component-Level CSSNext. js supports CSS Modules using the [name]. module.
This is possible because Next.js extends the concept of import beyond JavaScript. To add a stylesheet to your application, import the CSS file within pages/_app.js. For example, consider the following stylesheet named styles.css:
There are two different ways to add styling. The class is given to the element when it is active by writing: <NavLink to="/about" activeClassName="active"> About </NavLink> The styles is applied to the element when it is active by writing: 2. Create An Active Link In NextJS
Next.js allows you to import CSS files from a JavaScript file. This is possible because Next.js extends the concept of import beyond JavaScript. To add a stylesheet to your application, import the CSS file within pages/_app.js.
In your page components import Head and add a <link /> to your CSS. And that's it, this way Next.js should render the link tag in the head of the page and the browser will download the CSS and apply it. Sorry, something went wrong. Wow, thank you for the quick reply :).
Try this:
<Link href="/globalSettings">
<a className="app-subnav__link">Settings Overview</a>
</Link>
Reference: https://nextjs.org/docs/api-reference/next/link
120
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
