How to change breakpoints, max-width in Container in this ReactJS assembly?

Question

JavaScript

I'm trying out GatsbyJS, a static site generator in React. Before that, I generally had little experience with React and Webpack, if I tried the JS backend, then Express with simple templating engines, and so on. So, of course, everything is different here. But it looks very interesting - https://github.com/gatsbyjs/gatsby
I understand the example of a blog built on this generator - https://github.com/gatsbyjs/gatsby-starter-blog
And I can't catch up on how I can change the brakepoints for media queries? Apparently, it uses its own bicycle for the react-responsive-grid grid (I can be mistaken that this is the module that sets the necessary styles). But I don’t see point-blank how and where to change to my own values. And these are inline styles. Help to understand, please.

Answer 1

I don't know if the question is still relevant.
But if you look at the code of the Layout component, then we get the width from the rhythm function.

<div
        style={{
          marginLeft: `auto`,
          marginRight: `auto`,
          maxWidth: rhythm(24),
          padding: `${rhythm(1.5)} ${rhythm(3 / 4)}`,
        }}
      >

It's in utils
It is a property of the typography object . We get it from

import Wordpress2016 from "typography-theme-wordpress-2016"

const typography = new Typography(Wordpress2016)

To change the original styles, you can try (example):

Wordpress2016.overrideThemeStyles = () => {
  return {
    "a.gatsby-resp-image-link": {
      boxShadow: `none`,
    },
  }
}