Box

Import

import { Box } from 'styled-system/jsx'

Usage

The Box pattern does not contain any additional styles. With its function form it's the equivalent of the css function. It can be useful with its JSX form and is the equivalent of a styled.div component, serving mostly to get style props available in JSX.

Shorthand

Use shorthand like bgColor instead of backgroundColor, m instead of margin, etc.

Pseudo Props

Use pseudo props like _hover to apply styles on hover, _focus to apply styles on focus, etc.

Border

Use the border and borderColor prop to apply border styles.

Shadow

Use the boxShadow or shadow prop to apply shadow styles.

Props

The Box component supports all style or factory props for styling.