Using the Built-in CSS Support

Overview

We’ve been using the conventional inline styling method to style our project all this time. We style components by using defined objects with the style rules as key-value pairs.

import React from "react"

const Text = () => <p style={styles.paragraph}> paragraph one </p>

const styles = {
  paragraph: { color: 'blue' }
}

While this method works, it is not the best way to go about this. This is because it could make our component files get quite bulky, and we also cannot fully use the potential of traditional CSS styling.

To let us use CSS files to create style rules, Gatsby extends import so we can import CSS style files directly into our component.

Component-level CSS

Let’s consider the style above. We can first declare the styles in an external CSS file as follows: