Definition

Style props are a way to alter the style of a component by simply passing props to it. It helps to save time by providing helpful shorthand ways to style components.

Reference

The following table shows a list of every style prop and the properties within each group.

Margin and padding

Prop	CSS Property	Theme Key
`m`, `margin`	`margin`	`space`
`mt`, `marginTop`	`margin-top`	`space`
`mr`, `marginRight`	`margin-right`	`space`
`mb`, `marginBottom`	`margin-bottom`	`space`
`ml`, `marginLeft`	`margin-left`	`space`
`mx`	`margin-left` and `margin-right`	`space`
`my`	`margin-top` and `margin-bottom`	`space`
`p`, `padding`	`padding`	`space`
`pt`, `paddingTop`	`padding-top`	`space`
`pr`, `paddingRight`	`padding-right`	`space`
`pb`, `paddingBottom`	`padding-bottom`	`space`
`pl`, `paddingLeft`	`padding-left`	`space`
`px`	`padding-left` and `padding-right`	`space`
`py`	`padding-top` and `padding-bottom`	`space`

Color and background color

Prop	CSS Property	Theme Key
`color`	`color`	`colors`
`bg`, `background`	`background`	`colors`
`opacity`	`opacity`	none

Typography

Prop	CSS Property	Theme Key
`fontFamily`	`font-family`	`fonts`
`fontSize`	`font-size`	`fontSizes`
`fontWeight`	`font-weight`	none
`lineHeight`	`line-height`	none
`letterSpacing`	`letter-spacing`	none
`textAlign`	`text-align`	none
`fontStyle`	`font-style`	none
`textTransform`	`text-transform`	none
`textDecoration`	`text-decoration`	none

Layout, width and height

Prop	CSS Property	Theme Key
`width`	`width`	`sizes`
`height`	`height`	`sizes`
`minWidth`	`min-width`	`sizes`
`maxWidth`	`max-width`	`sizes`
`minHeight`	`min-height`	`sizes`
`maxHeight`	`max-height`	`sizes`
`display`	`display`	none
`size`	`width`, `height`	`sizes`
`verticalAlign`	`vertical-align`	none
`overflow`	`overflow`	none
`overflowX`	`overflowX`	none
`overflowY`	`overflowY`	none

Flexbox

Prop	CSS Property	Theme Key
`alignItems`	`align-items`	none
`alignContent`	`align-content`	none
`justifyItems`	`justify-items`	none
`justifyContent`	`justify-content`	none
`flexWrap`	`flex-wrap`	none
`flexDirection`	`flex-direction`	none
`flex`	`flex`	none
`flexGrow`	`flex-grow`	none
`flexShrink`	`flex-shrink`	none
`flexBasis`	`flex-basis`	none
`justifySelf`	`justify-self`	none
`alignSelf`	`align-self`	none
`order`	`order`	none

Grid Layout

Prop	CSS Property	Theme Key
`gridGap`	`grid-gap`	`space`
`gridRowGap`	`grid-row-gap`	`space`
`gridColumnGap`	`grid-column-gap`	`space`
`gridColumn`	`grid-column`	none
`gridRow`	`grid-row`	none
`gridArea`	`grid-area`	none
`gridAutoFlow`	`grid-auto-flow`	none
`gridAutoRows`	`grid-auto-rows`	none
`gridAutoColumns`	`grid-auto-columns`	none
`gridTemplateRows`	`grid-template-rows`	none
`gridTemplateColumns`	`grid-template-columns`	none
`gridTemplateAreas`	`grid-template-areas`	none

Layout, width and height

import { Box } from "@reactberry/core"
// verbose
<Box width="100%" height={32} />
// shorthand
<Box w="100%" h="32px" />
// use theme sizing
<Box boxSize="sm" />
// width `50%`
<Box w={1/2} />
// width `256px`
<Box w={256} />
// width `'40px'`
<Box w='40px' />

Position

Prop	CSS Property	Theme Field
`position`	`position`	none
`zIndex`	`z-index`	none
`top`	`top`	`space`
`right`	`right`	`space`
`bottom`	`bottom`	`space`
`left`	`left`	`space`

Shadow

Prop	CSS Property	Theme Field
`textShadow`	`text-shadow`	`shadows`
`boxShadow`	`box-shadow`	`shadows`

The `as` prop

The as prop is a feature that all of our components that allows you to pass an HTML tag or component to be rendered.

For example, say you are using a Button component, and you need to make it a link instead. You can compose a and Button like this:

Link

<Button as="a" href="https://google.com">
  Link
</Button>

<Button as="a" href="https://google.com">
  Link
</Button>

This allows you to use all of the Button props and all of the a props without having to wrap the Button in an a component.

Definition

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}Reference

Reference