glamorous glamor.css as className

client-usage.js

<P className={glamor.css({ color: 'blue' })}>wow</P>

component-works.js

import glamorous from 'glamorous'
import React from 'react'

const P = glamorous.p({
  color: 'red',
})

export default props => <P {...props} className={`${props.className}`} /> 

// works!

component-wouldrather.js

import glamorous from 'glamorous'
import React from 'react'

const P = glamorous.p({
  color: 'red',
})

export default props => <P {...props} />

// errors with:
// VM128 preview.bundle.js:830 Warning: Failed prop type: Invalid prop `className` of type `object` supplied to `glamorous(p)`, expected `string`.
//    in glamorous(p)
//    in Unknown (created by BackgroundDecorator)
//    in div (created by BackgroundDecorator)
//    in BackgroundDecorator

// also errors: 
// export default props => <P {...props} className={props.className} />

Examples seem to always cast this way:

const myCustomGlamorStyles = glamor.css({fontSize: 2})
<MyStyledDiv className={`${myCustomGlamorStyles} custom-class`} />
// styles applied:
// {margin: 1, fontSize: 2, padding: 1}
// as well as any styles custom-class applies

https://glamorous.rocks/basics/