Gatsby
Up and Running with Gatsby: Styling
  •  

Inline Styles Using JSX

Mute
Current Time 0:00
/
Duration Time 0:00
Loaded: 0%
Progress: 0%
Stream TypeLIVE
Remaining Time -0:00
 
PRO

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