Reputation: 13
I am pretty new to Gatsby Js, I am quite struggling to understand how I can change my Header component styling based the current path. The Header component is common to all the pages but the styling should change slightly when I navigate to other pages like /portfolio and /team. Due to Gatsby SSR in production on the first page load when the path is "/portfolio or "team" the proper styling for the header doesn't change since the code to modify the className of the header component happens in the browser. Is there any way using the Browser API or SSR API to add/remove the correct className of the Header component? I hope I made it clear enough.
Upvotes: 1
Views: 725
Reputation: 4546
Actually its easy. Gatsby comes with a handy plugin called react-helmet make sure you have it inside your package.json
if you don't, check the Docs for installation.
All you need to do is to import helmet
inside your targeted page for example portfolio.js
import { Helmet } from 'react-helmet'
After your <SEO>
component, add Helmet
component and define a CSS class within bodyAttributes
element like so:
<Helmet bodyAttributes={{ class: 'portfolio-page' }} />
This will add portfolio-page
class to the page body
tag, and so, you can target that class like you would with regular CSS classes.
.portfolio-page .your-navigation {
background-color: black;
}
Here is a codeSandbox for live example. Check page-2.js
and components > layout.css
Upvotes: 3