Skip to main content

Config

Grid layout related settings

import {GridThemeProvider, IGridSetting} from '@acrool/react-grid';

const gridTheme: IGridSetting = {
spacer: '1rem',
gridColumns: 12,
gridBreakpoints: {
xs: 0,
sm: 576,
md: 768,
lg: 992,
xl: 1200,
xxl: 1540,
},
containerMaxWidths: {
sm: 540,
md: 720,
lg: 960,
xl: 1140,
xxl: 1540,
},
};

<GridThemeProvider gridTheme={gridTheme}>
<App/>
</GridThemeProvider>
Warning

Do not use GridThemeProvider again in the lower layer to cause secondary generation: the root parameter overwrites the original parameter

Props

Props NameTypeRequiredDefaultDescription
childrenReactNode
gridThemeIGridSettingin exampleGrid layout related settings

IGridSetting

Props NameTypeRequiredDefaultDescription
spacerstringin examplepadding, grid, gap base unit
gridColumnsnumberin exampleGrid system col total
gridBreakpointsIBreakpointsin exampleGrid layout related settings
containerMaxWidthsTContainerMaxWidthsin exampleGrid system container max width

IBreakpoints

{
xs: number
sm: number
md: number
lg: number
xl: number
xxl: number
}

TMediaSize

'xs'|'sm'|'md'|'lg'|'xl'|'xxl'

TContainerMaxWidths

Omit<IBreakpoints, 'xs'>