Style props#
You're able to apply any CSS attribute as a prop to <Box>
. These attributes can be passed through as camel-cased props. Style props can be very useful when you just want to apply an adhoc style without pulling it out into it's own styled component.
Colors#
You can specify a color from the palette with any color-based CSS attribute.
Reference#
Theme reference: theme.palette
Style props: color
, backgroundColor
, borderBlockEndColor
, borderBlockStartColor
, borderBottomColor
, borderColor
, borderInlineEndColor
, borderInlineStartColor
, borderLeftColor
, borderRightColor
, borderTopColor
, borderBottomColor
, caretColor
, columnRuleColor
, outlineColor
, textDecorationColor
, textEmphasisColor
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.
Reference#
Theme reference: theme.spacing
Style props: margin
, marginLeft
, marginRight
, marginTop
, marginBottom
, marginX
, marginY
, padding
, paddingLeft
, paddingRight
, paddingTop
, paddingBottom
, paddingX
, paddingY
, top
, left
, bottom
, right
, height
, width
, minWidth
, minHeight
, maxWidth
, maxHeight
Fonts & typography#
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 specify a letter spacing from the theme for letter spacings.
You can specify a line height from the theme for line heights.
world
Reference#
Font family#
Theme reference: theme.fonts
Style props: font
, fontFamily
Font weight#
Theme reference: theme.fontWeights
Style props: fontWeight
Font size#
Theme reference: theme.fontSizes
Style props: fontSize
Letter spacing#
Theme reference: theme.letterSpacings
Style props: letterSpacing
Line height#
Theme reference: theme.lineHeights
Style props: lineHeight
Alignment#
Reference#
Style props: alignX
, alignY
Altitude#
You can specify an altitude from the theme.
Reference#
Theme reference: theme.altitudes
Style props: altitude
Borders#
You can specify a border from the theme.
Reference#
Theme reference: theme.borders
Style props: border
, borderLeft
, borderRight
, borderTop
, borderBottom
Border radius#
You can specify a border radius from the theme.
Reference#
Theme reference: theme.borderRadii
Style props: borderRadius
, borderLeftRadius
, borderRightRadius
, borderTopRadius
, borderBottomRadius
, borderTopLeftRadius
, borderBottomLeftRadius
, borderTopRightRadius
, borderBottomRightRadius
Responsive styles#
You can pass breakpoints from the theme as responsive attributes inside your style 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 styles#
style 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