Add dynamic styling

One of the great features of CSS-in-JS is that it allows us to modify the styling of elements dynamically. Let's take a look at how we can do this.

You will recall that in an earlier lesson in this section we added an 8px wide border to the bottom of our header. We'll use that to indicate whether we're on a list page, a post page, or a page, erm..., page 🤷🏻‍♂️ by changing the colour of the border depending on which type of page we're on.

To do this we'll add an isPostType prop to the <Header> component.

// File: /packages/my-first-theme/src/components/index.js
​
// ...
<Header isPostType={data.isPostType}>
// ...

This prop gets passed to a function that we add to our CSS that conditionally checks the boolean value passed in to determine what colour the border should be, i.e. either green in the case of a post or page, or maroon in the case of a list.

// File: /packages/my-first-theme/src/components/index.js
​
// ...
const Header = styled.header`
  background-color: #e5edee;
  border-width: 0 0 8px 0;
  border-style: solid;
  border-color: ${(props) => (props.isPostType ? "lightseagreen" : "maroon")};
`

Let's extend this to get a different colour for pages to further distinguish them from posts. We'll add the isPage prop to our header, and extend our conditional.

// File: /packages/my-first-theme/src/components/index.js
​
// ...
<Header isPostType={data.isPostType} isPage={data.isPage}>
// ...
​
// ...
const Header = styled.header`
  background-color: #e5edee;
  border-width: 0 0 8px 0;
  border-style: solid;
  border-color: ${ props => props.isPostType ? ( props.isPage ? 'lightsteelblue' : 'lightseagreen' ) : 'maroon'};
`

Now if we navigate to Home the header has a maroon border (as it's a listing page), if we click on one of the posts the post page has a green border, and if we navigate to About Us, (which is a page rather than a post) the header has a blue border.

The styling for the border is applied dynamically depending on the type of page that we're on, which is determined by the isPostType and isPage boolean properties found in the data for the current URL.

Awesome, our site is starting to look pretty good now! 👌