response-styled-flexboxgrid другой конфиг для другого видового экрана

Question

Я использую эту библиотеку сетки в проекте https://github.com/yldio/joyent-react-styled-flexboxgrid, и я хотел бы добавить 3 разных конфига для 3 разных размеров экрана (разные значения gutterWidth и столбцов).

В документе я вижу только возможность создать один конфиг и пропустить его через тему. Кто-нибудь здесь, кто знает какое-либо решение или любую другую библиотеку, которая отвечает моим требованиям.

Редактировать: Проект использует NextJS для SSR.

Answer 1

Мне кажется, вы бы использовали ThemeProvider и изменили theme реквизит в зависимости от ширины экрана.

import React from 'react'

import {ThemeProvider} from 'styled-components'
import {Grid, Col, Row} from 'react-styled-flexboxgrid'

const theme = {
  flexboxgrid: {
    // Defaults
    gridSize: 12, // columns
    gutterWidth: 1, // rem
    outerMargin: 2, // rem
    mediaQuery: 'only screen',
    container: {
      sm: 46, // rem
      md: 61, // rem
      lg: 76  // rem
    },
    breakpoints: {
      xs: 0,  // em
      sm: 48, // em
      md: 64, // em
      lg: 75  // em
    }
  }
}

const sizedTheme = 
    (typeof window !== 'undefined') && 
    (window.innerWidth < 500) ? { ...theme, gutterWidth: .5 } : theme;

const App = props =>
  <ThemeProvider theme={sizedTheme}>
    <Grid>
      <Row>
        <Col xs={6} md={3}>Hello, world!</Col>
      </Row>
    </Grid>
  </ThemeProvider>

Примерно так, с учетом ваших целей.