glamorous API

Whether you create one yourself or use one of the built-in ones mentioned above, each glamorousComponentFactory allows you to invoke it with styles and it returns you a new component which will have those styles applied when it's rendered. This is accomplished by generating a className for the styles you give and forwarding that className onto the rendered element. So if you're wrapping a component you intend to style, you'll need to make sure you accept the className as a prop and apply it to where you want the styles applied in your custom component (normally the root element).

const UnstyledComp = ({ className, children }) => <div className={`\${className} other-class`}>{children}</div>
const MyStyledComp = glamorous(UnstyledComp)({ margin: 1 })

<MyStyledComp>content</MyStyledComp>
// rendered output: <div class="<glamor-generated-class> other-class">content</div>
// styles applied: {margin: 1}

...styles

The glamorousComponentFactory accepts any number of style object arguments. These can be style objects or functions which are invoked with props on every render and return style objects. To learn more about what these style objects can look like, please take a look at the glamor documentation.

const MyStyledDiv = glamorous.div(
  {
    margin: 1,
  },
  (props) => ({
    padding: props.noPadding ? 0 : 4,
  })
)

<MyStyledDiv /> // styles applied: {margin: 1, padding: 4}
<MyStyledDiv noPadding /> // styles applied: {margin: 1, padding: 0}

You can also specify other classes you'd like applied to the component as well. If these classes are generated by glamor, then their styles will be merged with the glamor style's, otherwise the class name will simply be forwarded. For example:

const className1 = glamor.css({paddingTop: 1, paddingRight: 1}).toString()
const styles2 = {paddingRight: 2, paddingBottom: 2}
const className3 = glamor.css({paddingBottom: 3, paddingLeft: 3}).toString()
const styles4 = {paddingLeft: 4}
const styles5 = props => (props.active ? 'active' : 'not-active')
const MyStyledDiv = glamorous.div(
  className1,
  styles2,
  className3,
  styles4,
  styles5,
  'extra-thing',
)
<MyStyledDiv /> // styles applied: {padding-top: 1, padding-right: 2, padding-bottom: 3, padding-left: 4}, 'not-active' and anything coming from `extra-thing`.

The current bundled typescript definitions are incomplete and based around the needs of the developers who contributed them.

Pull requests to improve them are welcome and appreciated. If you've never contributed to open source before, then you may find this free video course helpful.

Complete support

Config

• useDisplayNameInClassName

Dynamic styles

To use dynamic styles with custom props use generics. Example:

const MyStyledDiv = glamorous.div<{noPadding?: boolean}>(
  {
    margin: 1,
  },
  props => ({
    padding: props.noPadding ? 0 : 4,
  })
)

<MyStyledDiv /> // styles applied: {margin: 1, padding: 4}
<MyStyledDiv noPadding /> // styles applied: {margin: 1, padding: 0}

Incomplete support

CSS property safety

• pseudo-class
• pseudo-element
• Relational CSS Selectors
• Media Queries

All of these work, however you only get typesafety and intellisense on simple css key props (see the css typings).

In the future this may become possible with Microsoft/TypeScript#6579

Alternatively support for full typesafety would be possible using patterns along the lines of http://typestyle.io/.

Built-in DOM component factories

Currently support is limited to div and svg.

Unknown Support

Animations

Possible support via glamors typings

No Support

• built-in GlamorousComponents

Known Issues

Generating Definition files

When using glamorous in a library that you are generating definition files for you will need to include the following import and export to get around a typescript issue Microsoft/TypeScript/issues/5938.

import glamorous, { ExtraGlamorousProps as Unused } from "glamorous"
export { Unused }