styled-system Custom Breakpoints

Question

I would like to specify my own custom breakpints. The documentation as https://styled-system.com/responsive-styles/#using-objects only refers to theme.js.

But I don't understand where do I place theme.js? or find it? and how do I import it into the project? and how do I define breakpoints with aliases and use plain objects as values.?

Can someone please guide me? I am using styled-system in Gatsby.js

Answer 1

You simply need to export a key called breakpoints. In my project we use a js file to define our theme, it looks like this

export const breakpoints = ['769px', '1367px'];

Since you are using Gatbsy, you need to install gatsby-plugin-theme-ui. Your theme file will be src/gatsby-plugin-theme-ui/index.js.