Stylistic Elements
A set of React components that make it easy to style elements using props.
For example:
; <Element tag="input" type="text" id="myElement" onClick=onClickHandler marginTop=12 translateY=24/> // Renders as: <input type="text" id="myElement" onClick=onClickHandler style= marginTop: 12 transform: 'translate(0, 24px)' />
Available elements
Element
: the most basic one, simply converts props into inline styles. I recommend using one of the higher-level components below instead.ResetElement
: likeElement
but resets some common user-agent styles to their defaults.Block
: a block-level element. Defaults todiv
.Inline
: an inline element. Defaults tospan
.InlineBlock
: an inline-block element. Defaults to adiv
withdisplay: inline-block
andvertical-align: middle
.
Supported attributes
See stylistic for the list of supported attributes.