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.
Nested Selectors
Use nested objects to apply pseudoclasses and other child selectors within the sx
prop.
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 themeexport 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.
<Boxsx={{margin: [ 0, 1, 2 ],}}/>
You can also use standard CSS media query syntax for one-off cases or non-mobile-first styles.
<Boxsx={{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.
// 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.
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 ]} />
Typography
Use the typography props to change text styles based on values defined in your theme.
fontSize
fontFamily
fontWeight
lineHeight
letterSpacing
textAlign
fontStyle
Layout
Use layout props to change the width, height, display and other values on any element.
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.
<Boxwidth={[1, // 100% width on small screens1/2, // 50% width from the next breakpoint and up1/3, // 33% width from the next breakpoint and up1/4 // 25% width for all larger breakpoints]}/>
Flexbox
Use flexbox props to apply layout styles.
alignItems
alignContent
justifyItems
justifyContent
flexWrap
flexDirection
flex
flexGrow
flexShrink
flexBasis
justifySelf
alignSelf
order
For a full reference of available props, see the Reflexbox docs.