Reflexjs
DocumentationBlocks LibraryGitHubTwitter
v1.0.1

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" />
PropCSS PropertyTheme Field
m, marginmarginspace
mt, marginTopmargin-topspace
mr, marginRightmargin-rightspace
mb, marginBottommargin-bottomspace
ml, marginLeftmargin-leftspace
mx, marginXmargin-left and margin-rightspace
my, marginYmargin-top and margin-bottomspace
p, paddingpaddingspace
pt, paddingToppadding-topspace
pr, paddingRightpadding-rightspace
pb, paddingBottompadding-bottomspace
pl, paddingLeftpadding-leftspace
px, paddingXpadding-left and padding-rightspace
py, paddingYpadding-top and padding-bottomspace

Color#

// `color` to `theme.colors.text`
// `background-color` to `theme.colors.primary`
<button color="text" bg="primary" />
PropCSS PropertyTheme Field
colorcolorcolors
bg, backgroundColorbackground-colorcolors
opacityopacitynone

Typography#

// `font-family` to `theme.fonts.body`
// `font-size` to `theme.fontSizes.md`
<p fontFamily="body" fontSize="md" />
PropCSS PropertyTheme Field
fontFamilyfont-familyfonts
fontSizefont-sizefontSizes
fontWeightfont-weightfontWeights
lineHeightline-heightlineHeights
letterSpacingletter-spacingletterSpacings
textAligntext-alignnone
fontStylefont-stylenone

Width, height and display#

// `width` to `100px`
// `height` to `120px`
<div w="100" h="120" />
// `width` and `height` to `10px`
<div size="10px" />
PropCSS PropertyTheme Field
w, widthwidthsizes
h, heightheightsizes
minW, minWidthmin-widthsizes
maxW, maxWidthmax-widthsizes
minH, minHeightmin-heightsizes
maxH, maxHeightmax-heightsizes
sizewidth heightsizes
displaydisplaynone
verticalAlignvertical-alignnone
overflowoverflownone
overflowXoverflowXnone
overflowYoverflowYnone

Flexbox#

import { Flex } from "reflexjs"
<Flex alignItems="center" justifyContent="center" />
// or
<div display="flex" alignItems="center" justifyContent="center" />
PropCSS PropertyTheme Field
alignItemsalign-itemsnone
alignContentalign-contentnone
justifyItemsjustify-itemsnone
justifyContentjustify-contentnone
flexWrapflex-wrapnone
flexDirectionflex-directionnone
flexflex (shorthand)none
flexGrowflex-grownone
flexShrinkflex-shrinknone
flexBasisflex-basisnone
justifySelfjustify-selfnone
alignSelfalign-selfnone
orderordernone

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" />
PropCSS PropertyTheme Field
gap, gridGapgrid-gapspace
gridRowGapgrid-row-gapspace
gridColumnGapgrid-column-gapspace
gridColumngrid-columnnone
gridRowgrid-rownone
gridAreagrid-areanone
gridAutoFlowgrid-auto-flownone
gridAutoRowsgrid-auto-rowsnone
gridAutoColumnsgrid-auto-columnsnone
row, gridTemplateRowsgrid-template-rowsnone
col, gridTemplateColumnsgrid-template-columnsnone
gridTemplateAreasgrid-template-areasnone

Background#

// `background-color` to `theme.colors.primary`
// `background-image` to `url('/images/pattern.jpg')`
<div bg="primary" backgroundImage="url('/images/pattern.jpg')" />
PropCSS PropertyTheme Field
backgroundbackgroundnone
bg, backgroundColorbackground-colorcolors
backgroundImagebackground-imagenone
backgroundSizebackground-sizenone
backgroundPositionbackground-positionnone
backgroundRepeatbackground-repeatnone

Border#

// `border-bottom-width` to `1px`
// `border-radius` to `theme.radii.lg`
<div borderBottomWidth="1px" rounded="lg" />
PropCSS PropertyTheme Field
borderborderborders
borderWidthborder-widthborderWidths
borderStyleborder-styleborderStyles
borderColorborder-colorcolors
rounded, borderRadiusborder-radiusradii
borderTopborder-topborders
borderTopWidthborder-top-widthborderWidths
borderTopStyleborder-top-styleborderStyles
borderTopColorborder-top-colorcolors
borderTopLeftRadiusborder-top-left-radiusradii
borderTopRightRadiusborder-top-right-radiusradii
borderRightborder-rightborders
borderRightWidthborder-right-widthborderWidths
borderRightStyleborder-right-styleborderStyles
borderRightColorborder-right-colorcolors
borderBottomborder-bottomborders
borderBottomWidthborder-bottom-widthborderWidths
borderBottomStyleborder-bottom-styleborderStyles
borderBottomColorborder-bottom-colorcolors
borderBottomLeftRadiusborder-bottom-left-radiusradii
borderBottomRightRadiusborder-bottom-right-radiusradii
borderLeftborder-leftborders
borderLeftWidthborder-left-widthborderWidths
borderLeftStyleborder-left-styleborderStyles
borderLeftColorborder-left-colorcolors
borderXborder-left & border-rightborders
borderYborder-top & border-bottomborders
roundedTopborder-top-left-radius & border-top-right-radiusradii
roundedBottomborder-bottom-left-radius & border-bottom-right-radiusradii
roundedLeftborder-top-left-radius & border-bottom-left-radiusradii
roundedRightborder-top-right-radius & border-bottom-right-radiusradii

Position#

// `position` to `absolute`
// `top` to `theme.space[4]`
<div position="absolute" top="4" />
PropCSS PropertyTheme Field
positionpositionnone
z, zIndexz-indexzIndices
toptopspace
rightrightspace
bottombottomspace
leftleftspace

Shadow#

// `text-shadow` to `1px 1px #000`
// `box-shadow` to `theme.shadows.xl`
<div textShadow="1px 1px #000" boxShadow="xl" />
PropCSS PropertyTheme Field
textShadowtext-shadowshadows
boxShadowbox-shadowshadows

Other props#

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

Theme SpecificationBreakpoints

© 2021 Reflexjs

DocumentationBlocks LibraryGitHubTwitter