Props

All Rebass components extend the base Box component, and include Styled System props for ensuring your design constraints are easily accessible, while allowing you the flexibility to create responsive designs inline in your components.

sx Prop

The sx prop accepts a style object, with easy access to values from your theme and the ability to quickly add responsive styles to any property using arrays as values. If you've used Theme UI or Styled System before, this will probably seem familiar. If you've used the Emotion css prop before, the sx prop works in a similar way, but allows you to use values from your theme object.

The sx prop is built-in and does not require any additional configuration, which means it will work in any React app, such as Create React App, or in MDX documents.

<Box
  sx={{
    color: 'primary', // theme.colors.primary
    fontSize: 2,      // theme.fontSizes[2]
    margin: 3,        // theme.space[3]
  }}>
  Hello
</Box>

Nested Selectors

Use nested objects to apply pseudoclasses and other child selectors within the sx prop.

<Button
  sx={{
    ':hover': {
      backgroundColor: 'tomato',
    }
  }}>
  Beep
</Button>

Responsive Styles

Mobile-first responsive styles based on breakpoints defined in your theme can be quickly applied to any element using arrays as values in the sx prop, or with any of the shorthand style props below. The first value in the array will apply to all screen widths, and each value after will be applied from that breakpoint and up.

Define breakpoints in your theme using an array of widths.

// example theme
export default {
  breakpoints: [ '40em', '52em', '64em' ],
}

For any individual CSS property, use an array as a value to quickly apply mobile-first responsive styles for that single property.

<Box
  sx={{
    margin: [ 0, 1, 2 ],
  }}
/>

You can also use standard CSS media query syntax for one-off cases or non-mobile-first styles.

<Box
  sx={{
    display: 'block',
    '@media screen and (max-width: 64em)': {
      display: 'none',
    }
  }}
/>

The sx prop uses Styled System CSS to pick up values from your theme and write responsive styles using the array syntax.

If you ever need to add styles that do not use values from your theme, use the css prop, which is available on all components, without the need for additional configuration.

as Prop

The underlying HTML element rendered in any component can be overridden by the as prop.

<Heading as='h1'>Hello</Heading>

Styled System Props

In addition to the sx prop, several Styled System props are provided as ergonomic shortcuts. These props allow you to quickly modify styles on a per-element basis throughout your application. This level of flexibility in your UI component API makes it easy to use values from your design system's constraints in situations that you might not have accounted for when creating your components.

Because each component is based on the same base Box component, the props API for your entire design system can stay consistent, making it easier to learn once, use everywhere.

Colors

Use the color and bg (or backgroundColor) props to add styles based on the theme.colors scale.

<Box color='white' bg='secondary' p={3}>
  Hello
</Box>

// Keys reference values in the color palette object
<Text color='primary' />
// Background color can be set with the `bg` prop
<Button bg='secondary' />
// Raw CSS values that do not map to a key in `theme.colors` can be used
<Button bg='tomato' />

Margin and Padding

Margin and padding can be added to any element based on the theme.space scale. The margin and padding props help promote consistency in layout without the need to add custom margin and padding declarations throughout an application. The margin and padding props use a shorthand syntax, similar to other OOCSS approaches and many CSS libraries.

<Box
  p={3}
  mx={2}
  my={4}
  color='background'
  bg='primary'>
  Hello
</Box>

• m: margin
• mt: margin-top
• mr: margin-right
• mb: margin-bottom
• ml: margin-left
• mx: margin-left and margin-right
• my: margin-top and margin-bottom
• p : padding
• pt: padding-top
• pr: padding-right
• pb: padding-bottom
• pl: padding-left
• px: padding-left and padding-right
• py: padding-top and padding-bottom

// Numbers reference steps on the spacing scale
// e.g. 8px
<Text m={2} />
// Numbers greater than the length of `theme.space.length` are converted to pixels
<Text my={256} />
// Negative values can be used to add negative margins
<Text mx={-2} />
// Strings can be used for other values
<Text mx='auto' />
// Arrays can be used for mobile-first responsive styles
<Text m={[ 0, 1, 2 ]} />

Typography

Use the typography props to change text styles based on values defined in your theme.

<Text
  fontFamily='monospace'
  fontSize={[ 4, 5 ]}
  fontWeight='bold'
  lineHeight='body'>
  Hello
</Text>

• fontSize
• fontFamily
• fontWeight
• lineHeight
• letterSpacing
• textAlign
• fontStyle

Layout

Use layout props to change the width, height, display and other values on any element.

<Box
  display='inline-block'
  width={128}
  height={128}
  p={3}
  color='white'
  bg='primary'>
  Hello
</Box>

• width
• minWidth
• maxWidth
• height
• minHeight
• maxHeight
• display
• size (width and height)
• verticalAlign
• overflow

Width

The width prop includes an additional ergonomic shorthand for applying percentage-based widths. Any fractional number from 0 to 1 will be converted to a percentage based width, allowing you to quickly define responsive grid layouts directly in the components where you need them.

<Box
  width={[
    1,    // 100% width on small screens
    1/2,  // 50% width from the next breakpoint and up
    1/3,  // 33% width from the next breakpoint and up
    1/4   // 25% width for all larger breakpoints
  ]}
/>

Flexbox

Use flexbox props to apply layout styles.

<Flex>
  <Box
    flex='1 1 auto'
    p={3}
    color='white'
    bg='primary'>
    Beep
  </Box>
  <Box p={3} color='white' bg='secondary'>
    Boop
  </Box>
</Flex>

• alignItems
• alignContent
• justifyItems
• justifyContent
• flexWrap
• flexDirection
• flex
• flexGrow
• flexShrink
• flexBasis
• justifySelf
• alignSelf
• order

For a full reference of available props, see the Reflexbox docs.