Box

0.6.0-alpha.7

Use the

Box

component as a layout primitive to add margin, padding, and colors to content.

import { Box } from 'theme-ui';

some text

({ color, bg, p }) => (
  <Box sx={{ color, background: bg, p }}>some text</Box>
)

	Name	Description	Default
SpaceProps (1 properties)

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

	Name	Description	Default
BoxOwnProps (4 properties)

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

package	imports	peer
@emotion/styled	styled
@styled-system/color	color
@styled-system/should-forward-prop	createShouldForwardProp
@styled-system/space	space
@theme-ui/css 0.6.0-alpha.7	getcss