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
: marginmt
: margin-topmr
: margin-rightmb
: margin-bottomml
: margin-leftmx
: margin-left and margin-rightmy
: margin-top and margin-bottomp
: paddingpt
: padding-toppr
: padding-rightpb
: padding-bottompl
: padding-leftpx
: padding-left and padding-rightpy
: 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.