Gatsby
Up and Running with Gatsby: Styling
  •  

Inline Styles Using JSX

PRO

Inline styling in Gatsby works just like you'd expect in a React application.

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.