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

Editable example

#Colors

You can specify a color from the palette with any color-based CSS attribute.

Read more...

Hello world
Editable example

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

Read more...

Hello world
Editable example

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

Hello world
Editable example

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

Hello world
Editable example

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

Hello world
Editable example

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

Hello world
Editable example

You can specify a letter spacing from the theme for letter spacings.

Hello world
Editable example

You can specify a line height from the theme for line heights.

Hello
world
Editable example

Read more...

#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

Read more...

Hello world
Editable example

#Reference

Style props: alignX, alignY

#Altitude

You can specify an altitude from the theme.

Read more...

Hello world
Editable example

#Reference

Theme reference: theme.altitudes

Style props: altitude

#Borders

You can specify a border from the theme.

Read more...

Hello world
Editable example

#Reference

Theme reference: theme.borders

Style props: border, borderLeft, borderRight, borderTop, borderBottom

#Border radius

You can specify a border radius from the theme.

Read more...

Hello world
Editable example

#Reference

Theme reference: theme.borderRadii

Style props: borderRadius, borderLeftRadius, borderRightRadius, borderTopRadius, borderBottomRadius, borderTopLeftRadius, borderBottomLeftRadius, borderTopRightRadius, borderBottomRightRadius

On this page
Copyright © 2021 Jake Moxey