#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.

Hello world

#Spacing

You can specify a spacing from the theme for margins & paddings.

Hello world

There are also paddingX, paddingY, marginX and marginY props to specify padding or margin in a particular direction.

Hello world

#Fonts

You can specify a font size from the theme for font sizes.

Hello world

You can specify a font weight from the theme for font weights.

Hello world

You can specify a font family from the theme for font families.

Hello world

#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.

This is a box

#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
This is a box
Copyright © 2020 Jake Moxey