Gatsby
Up and Running with Gatsby: Styling
  •  

Inline Styles Using JSX

PRO
Outline

To get started with styling in Gatsby, we'll use the same inline styling we'd use with JSX in React.

Styling with JSX basically amounts to using the style attribute and passing in an object with CSS properties. In the video, we add an object called headerStyles with { color: "purple"} to a div (style={headerStyles}) in Header.js.

Inline styling isn't really ideal, so let's learn about global styles in the next video.

 

I finished! On to the next chapter