react-styled flexboxgrid不同视口的不同配置

Question

我在https://github.com/yldio/joyent-react-styled-flexboxgrid项目中使用这个网格库，我想为3种不同的屏幕尺寸(不同的gutterWidth和列数)添加3种不同的配置。

在文档中，我只看到创建一个配置并通过主题传递它的可能性。这里有谁知道任何解决方案或其他库，以满足我的需求。

编辑:项目使用NextJS for 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>

像这样的东西，根据你的目标进行调整。