Разные настройки react-styled-flexboxgrid для разных областей просмотра
Я использую эту библиотеку сетки в проекте https://github.com/yldio/joyent-react-styled-flexboxgrid, и я хотел бы добавить 3 разных конфигурации для 3 разных размеров экрана (различное количество столбцов и ширина желоба).
В документе я вижу только возможность создать один конфиг и пропустить его через тему. Есть ли здесь кто-нибудь, кто знает какое-либо решение или любую другую библиотеку, отвечающую моему требованию.
Обновлено: проект использует NextJS для SSR.
Ответы 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>
Что-то вроде этого, с поправкой на ваши цели.
На самом деле это имелось в виду как псевдокод, поскольку у меня не было/не было логики, необходимой для определения разных размеров экрана. Есть библиотеки, которые могут позаботиться об этом за вас, если вам нужно. Отредактировал код, чтобы исправить ваше окно, ошибка undefined из-за nextjs.
Я забыл упомянуть, что мы используем nextjs в проекте, поэтому он возвращает «окно не определено»