Style props

Style your component by passing CSS properties as props.

With Reflexjs, you style a component by passing props to it. These props are called style props.

Example

An example Hero component styled using style props.

export default Hero({ title, text, url, image}) {
  return (
    <section display="grid" col="2" py="10">
      <div>
        <h1 variant="heading.h1">{title}</h1>
        <p variant="text.lead">{text}</p>
        <button bg="primary" py="2" px="4" mt="4>Learn more</button>
      </div>
      <img src={image} />
    </section>
  )
}

Reference Table

Reflexjs exposes all CSS properties as style props. You can see a reference of the most commonly used style props below.

Margin and padding

// `margin-left` and `margin-right` to `auto`
// `padding` to `theme.space[4]`
<div mx="auto" p="4" />

Prop	CSS Property	Theme Field
`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`, `marginX`	`margin-left` and `margin-right`	`space`
`my`, `marginY`	`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`, `paddingX`	`padding-left` and `padding-right`	`space`
`py`, `paddingY`	`padding-top` and `padding-bottom`	`space`

Color

// `color` to `theme.colors.text`
// `background-color` to `theme.colors.primary`
<button color="text" bg="primary" />

Prop	CSS Property	Theme Field
`color`	`color`	`colors`
`bg`, `backgroundColor`	`background-color`	`colors`
`opacity`	`opacity`	none

Typography

// `font-family` to `theme.fonts.body`
// `font-size` to `theme.fontSizes.md`
<p fontFamily="body" fontSize="md" />

Prop	CSS Property	Theme Field
`fontFamily`	`font-family`	`fonts`
`fontSize`	`font-size`	`fontSizes`
`fontWeight`	`font-weight`	`fontWeights`
`lineHeight`	`line-height`	`lineHeights`
`letterSpacing`	`letter-spacing`	`letterSpacings`
`textAlign`	`text-align`	none
`fontStyle`	`font-style`	none

Width, height and display

// `width` to `100px`
// `height` to `120px`
<div w="100" h="120" />

// `width` and `height` to `10px`
<div size="10px" />

Prop	CSS Property	Theme Field
`w`, `width`	`width`	`sizes`
`h`, `height`	`height`	`sizes`
`minW`, `minWidth`	`min-width`	`sizes`
`maxW`, `maxWidth`	`max-width`	`sizes`
`minH`, `minHeight`	`min-height`	`sizes`
`maxH`, `maxHeight`	`max-height`	`sizes`
`size`	`width` `height`	`sizes`
`display`	`display`	none
`verticalAlign`	`vertical-align`	none
`overflow`	`overflow`	none
`overflowX`	`overflowX`	none
`overflowY`	`overflowY`	none

Flexbox

import { Flex } from "reflexjs"

<Flex alignItems="center" justifyContent="center" />

// or

<div display="flex" alignItems="center" justifyContent="center" />

Prop	CSS Property	Theme Field
`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` (shorthand)	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

import { Grid } from "reflexjs"

// `grid-template-columns` to `1fr 1fr`
// `grid-gap` to `theme.space[4]`
<Grid col="2" gap="4" />

// or

<div display="grid" col="2" gap="4" />

Prop	CSS Property	Theme Field
`gap`, `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
`row`, `gridTemplateRows`	`grid-template-rows`	none
`col`, `gridTemplateColumns`	`grid-template-columns`	none
`gridTemplateAreas`	`grid-template-areas`	none

Background

// `background-color` to `theme.colors.primary`
// `background-image` to `url('/images/pattern.jpg')`
<div bg="primary" backgroundImage="url('/images/pattern.jpg')" />

Prop	CSS Property	Theme Field
`background`	`background`	none
`bg`, `backgroundColor`	`background-color`	`colors`
`backgroundImage`	`background-image`	none
`backgroundSize`	`background-size`	none
`backgroundPosition`	`background-position`	none
`backgroundRepeat`	`background-repeat`	none

Border

// `border-bottom-width` to `1px`
// `border-radius` to `theme.radii.lg`
<div borderBottomWidth="1px" rounded="lg" />

Prop	CSS Property	Theme Field
`border`	`border`	`borders`
`borderWidth`	`border-width`	`borderWidths`
`borderStyle`	`border-style`	`borderStyles`
`borderColor`	`border-color`	`colors`
`rounded`, `borderRadius`	`border-radius`	`radii`
`borderTop`	`border-top`	`borders`
`borderTopWidth`	`border-top-width`	`borderWidths`
`borderTopStyle`	`border-top-style`	`borderStyles`
`borderTopColor`	`border-top-color`	`colors`
`borderTopLeftRadius`	`border-top-left-radius`	`radii`
`borderTopRightRadius`	`border-top-right-radius`	`radii`
`borderRight`	`border-right`	`borders`
`borderRightWidth`	`border-right-width`	`borderWidths`
`borderRightStyle`	`border-right-style`	`borderStyles`
`borderRightColor`	`border-right-color`	`colors`
`borderBottom`	`border-bottom`	`borders`
`borderBottomWidth`	`border-bottom-width`	`borderWidths`
`borderBottomStyle`	`border-bottom-style`	`borderStyles`
`borderBottomColor`	`border-bottom-color`	`colors`
`borderBottomLeftRadius`	`border-bottom-left-radius`	`radii`
`borderBottomRightRadius`	`border-bottom-right-radius`	`radii`
`borderLeft`	`border-left`	`borders`
`borderLeftWidth`	`border-left-width`	`borderWidths`
`borderLeftStyle`	`border-left-style`	`borderStyles`
`borderLeftColor`	`border-left-color`	`colors`
`borderX`	`border-left` & `border-right`	`borders`
`borderY`	`border-top` & `border-bottom`	`borders`
`roundedTop`	`border-top-left-radius` & `border-top-right-radius`	`radii`
`roundedBottom`	`border-bottom-left-radius` & `border-bottom-right-radius`	`radii`
`roundedLeft`	`border-top-left-radius` & `border-bottom-left-radius`	`radii`
`roundedRight`	`border-top-right-radius` & `border-bottom-right-radius`	`radii`

Position

// `position` to `absolute`
// `top` to `theme.space[4]`
<div position="absolute" top="4" />

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

Shadow

// `text-shadow` to `1px 1px #000`
// `box-shadow` to `theme.shadows.xl`
<div textShadow="1px 1px #000" boxShadow="xl" />

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

Other props

All other CSS properties such as animation, transform, cursor are also supported.

Theme Specification Breakpoints