Как изменить брейкпоинты, max-width в Container в этой ReactJS сборке?

Question

[dhat]

Пробую GatsbyJS - генератор статический сайтов на Реакте. До этого вообще был небольшой опыт с Реактом и Вебпак, если пробовал бэкенд на JS, то Express с простыми шаблонизаторами и тд. Поэтому тут конечно вообще все по иному. Но выглядит весьма любопытно - https://github.com/gatsbyjs/gatsby

Разбираюсь в примере блога собранного на этом генераторе - https://github.com/gatsbyjs/gatsby-starter-blog
И не могу догнать, как мне изменить brakepoints для медиа запросов? Судя по всему, используется собственный велосипед для грида react-responsive-grid (могу ошибатся что это именно этот модуль задает нуные стили). Но как и где менять на свои значения я не вижу в упор. И это инлайн стили. Помогите разобраться, пожалуйста.

Answer 1

[Владимир Голубь]

Не знаю актуален ли вопрос.

Но если смотреть код компонента Layout, то ширину получаем из функции rhythm.

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

Она находится в utils

import { rhythm, scale } from "../utils/typography"

Она является свойством объекта typography

export const rhythm = typography.rhythm

Его мы получаем из

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

const typography = new Typography(Wordpress2016)

Для изменения исходных стилей можно попробовать (пример):

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