Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Official Plugin
View plugin on GitHub


Provide drop-in support for using the css-in-js library Glamor including optimized server rendering.

In addition, you can also use this plugin to make glamorous 💄 work with server side rendering and start writing React components that carry their styles with them.


npm install gatsby-plugin-glamor glamor

How to use

First add the plugin to your gatsby-config.js.

plugins: [`gatsby-plugin-glamor`]

Glamor provides many convenient ways to style your components. One particularly convenient (and suggested) way is to use its css prop. It works exactly the same as the default style prop except it supports the entire CSS language. So things not supported by inline styles are supported with Glamor like pseudo-classes/-elements, @media queries, parent/child/contextual selectors, etc.

render () {
  return (
        margin: `0 auto`,
        border: `1px solid gray`,
          color: `red`,
          // Pseudo styles are supported!
          ':hover': {
            textDecoration: `underline`,
          // As are media queries!
          '@media (min-width: 400px)': {
            color: `blue`,
        This is the title!
        The body!

The css prop works on both the default DOM components as well as most custom components. Under the hood, Glamor converts the css prop to a className prop so the css prop will work as long as your or the 3rd party component you’re using uses className.

© 2023 Gatsby, Inc.