#CSS props
You're able to apply any CSS attribute as a prop to <Box>
. These attributes can be passed through as camel-cased props. CSS props can be very useful when you just want to apply an adhoc style without pulling it out into it's own themeable component.
#Colors
You can specify a color from the palette with any color-based CSS attribute.
#Spacing
You can specify a spacing from the theme for margins & paddings.
There are also paddingX
, paddingY
, marginX
and marginY
props to specify padding or margin in a particular direction.
#Fonts
You can specify a font size from the theme for font sizes.
You can specify a font weight from the theme for font weights.
You can specify a font family from the theme for font families.
#Responsive attributes
You can pass breakpoints from the theme as responsive attributes inside your CSS props to apply the style for a particular viewport.
In this example, the background of the box will bed red until the max desktop width is reached. It will then fallback to the default.
#Pseudo selectors
CSS props allow you to specify certain pseudo selectors. This allows you to add adhoc styling for particular interactions.
The available pseudo selectors you can use are:
_hover
for:hover
_active
for:active
_hoveractive
for:hover:active
_focus
for:focus
_visited
for:visited