Style 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>
  )
}
 
Copy

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" />
 
Copy

Color#

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

Typography#

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

Width, height and display#

// `width` to `100px`
// `height` to `120px`
<div w="100" h="120" />
// `width` and `height` to `10px`
<div size="10px" />
 
Copy

Flexbox#

import { Flex } from "reflexjs"
<Flex alignItems="center" justifyContent="center" />
// or
<div display="flex" alignItems="center" justifyContent="center" />
 
Copy

grid#

Grid Layout#

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" />
 
Copy

Background#

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

Border#

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

Position#

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

Shadow#

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

Other props#

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