Props

Styled System

Rebass Native components use styled-system for responsive, theme-based style props.

Margin and Padding

All Rebass Native component use the space utility from styled-system to handle responsive margin and padding props based on a global spacing scale (theme.space). 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='white'
  bg='blue'>
  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 ]} />

Colors

All Rebass Native components use styled-system's color function to add the color and bg props. The color and bg props make using colors from the color palette simple to help promote design consistency.

The color values can be defined in the theme.colors object.

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

// Keys reference values in the color palette object
<Text color='blue' />

// Background color can be set with the `bg` prop
<Button bg='red' />

// Values that do not map to a key in `theme.colors` can be used
<Button bg='tomato' />

// Arrays can be used to change colors responsively
<Text color={[ 'blue', 'green' ]} />

Responsive Styles

Many Rebass Native props accept arrays as values to set mobile-first responsive styles. The first value is not scoped to a media query and applies to all breakpoints. Each value after the first corresponds to a media query derived from theme.breakpoints.

See the styled-system docs for more info.

<Flex flexWrap='wrap'>
  <Box
    width={[ 1, 1/2 ]}
    p={2}
    color='white'
    bg='blue'>
    Hello
  </Box>
  <Box
    width={[ 1, 1/2 ]}
    p={2}
    color='white'
    bg='dark'>
    Hello
  </Box>
</Flex>

<Text
  width={[
    1,    // 100% width at the smallest breakpoint
    1/2,  // 50% width at the next breakpoint
    null, // null skips a breakpoint
    1/4   // 25% width at the next
  ]}
/>

Component-Specific Props

Refer to the component documentation for information on component-specific props.