Skip to content

Latest commit

 

History

History
48 lines (40 loc) · 893 Bytes

createElement.md

File metadata and controls

48 lines (40 loc) · 893 Bytes

a drop-in replacement for React.createElement, allowing you to pass a css prop to elements. The props is converted to a className and added to the element.

usage

import { createElement } from 'glamor/react'
/* @jsx createElement */

<div css={{ color: 'red' }}>
  I'm red!
</div>

The props accepts arrays as well, so you could do

<div css={[{ color: 'red' }, someRule, { ... }]}> ... </div>

Use the following settings to avoid the createElement boilerplate

.babelrc

{
  ...
  "plugins": [
    [
      "transform-react-jsx",
      { "pragma": "Glamor.createElement" }
    ]
  ]
}

webpack.config.js

...
plugins: [
  new webpack.ProvidePlugin({
    Glamor: 'glamor/react'
  })
]

typescript

If you're looking to make this work with typescript, follow these instructions