Container

0.6.0-alpha.7

Centered, max-width layout component

Container variants can be defined in the

theme.layout

object. The Container component uses

theme.layout.container

as its default variant style.

import { Container } from 'theme-ui';

Container text

({ bg, p }) => (
  <Container sx={{ bg, p }}>Container text</Container>
)

	Name	Description	Default
SpaceProps (1 properties)

	p	Padding on top, left, bottom and right ResponsiveValue<stringnumbersymbol, Required<Theme<TLengthStyledSystem>>>	-
BackgroundColorProps (1 properties)

	Name	Description	Default
BoxOwnProps (4 properties)

	as	ElementType<any>	-
	variant	string	-
	css	Interpolation<any>	-
	sx	ThemeUIStyleObject	-
SpaceProps (28 properties)
HTMLAttributes (44 properties)
OpacityProps (1 properties)
AriaAttributes (48 properties)
DOMAttributes (161 properties)
Attributes (1 properties)
BackgroundColorProps (2 properties)
RefAttributes (1 properties)