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.
You can specify a color from the palette with any color-based CSS attribute.
You can specify a spacing from the theme for margins & paddings.
There are also
marginY props to specify padding or margin in a particular direction.
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.
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.
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: