Advanced Guides

This is some of the more advanced stuff you can do with glamorous
Edit

innerRef

How to access the underlying ref

Sometimes you need access to the ref of the underlying component that's rendered. You can accomplish this with the innerRef prop.

This is a function and if provided, will be called with the inner element's reference.

An input in a form
Edit

Working with existing CSS

Often you'll bring glamorous into an existing project which is already using global CSS. Many of the glamorous APIs make working with this as easy as possible.

Remember this
With CSS in JS, the goal is to style components and reuse those components. With this in mind, if you need to style your entire application (like html/body or add some reset styles), you wont do this with glamorous. Instead you can use regular CSS or use glamor's API for injecting global styles.

In addition, rather than using CSS to style an a tag with global CSS, you should create a Link component with all the styles you need and reuse that.

// TODO
Edit

Theming

Edit

Optimizing Bundle Size

If your use case is really size constrained, then you might consider using the "tiny" version of glamorous for your application. It is a miniature version of glamorous with a few limitations:

  1. No built-in component factories (glamorous.article({/* styles */ })) So you have to create your own (glamorous('article')({/* styles */ }))
  2. No built-in glamorous components (glamorous.Span)
  3. No props filtering for dynamic styles, instead, you place them on a special glam prop (see the example below).
  4. If you need ThemeProvider or withTheme, you must import those manually. They are not exported as part of glamorous/ tiny like they are with glamorous.

Here's an example of what you're able to do with it.

import React from 'react'
import glamorous from 'glamorous/dist/glamorous.es.tiny'

const Comp = glamorous('div')({
  color: 'red'
}, (props) => ({
  fontSize: props.glam.big ? 20 : 12
}))
function Root() {
  return (
    <Comp
      glam={{ big: true }}
      thisWillBeForwardedAndReactWillWarn
    >
      ciao
    </Comp>
  )
}

export default Root
Improved Experience
It's recommended to use either babel-plugin-module-resolver or the resolve.alias config with webpack so you don't have to import from that full path.

You have the following options available for this import:

  1. glamorous/dist/glamorous.es.tiny.js - use if you're using Webpack@>=2 or Rollup
  2. glamorous/dist/glamorous.cjs.tiny.js - use if you're not transpiling ESModules
  3. glamorous/dist/glamorous.umd.tiny.js - use if you're including it as a script tag. (There's also a .min.js version).
    4. <

The current size of glamorous/dist/glamorous.umd.tiny.min.js is: tiny size tiny gzip size

Important note
Because glamorous depends on glamor, you should consider the full size you'll be adding to your application if you don't already have glamor. The current size of glamor/umd/index.min.js is: glamor size glamor gzip size
Edit

Server Side Rendering

Because both glamor and react support SSR, glamorous does too! I actually do this on my personal site which is generated at build-time on the server. Learn about rendering react on the server and glamor too.