Styling React Components Using glamorous

💄 glamorous is a lightweight library for CSS-in-JS with a simple API that’s similar to styled-components’ and that makes use of glamor under the hood. Two of the main differences compared to styled-components is the use of JavaScript object literals and an additional API that allows to use DOM elements directly without creating additional named components.

Let’s go over how to use glamorous to give our components some style.

Installation

To get started, you’ll need a few packages: glamorous, glamor and prop-types:

Notice the use of double quotes inside the single quotes for the :before pseudo-element. That syntax is important for the pseudo-element to work correctly.

Alternative Usage

For simpler and smaller components, you can also use an alternative API where you import components that correspond to a specific DOM element and use them directly. This way you avoid having to come up with a bunch of names for your glamorous components:

glamorous is smart enough to distinguish between native element attributes and style props. With the above example, the card-title class will be added to the element as an additional class on top of the one generated by glamorous for the border-bottom style.

Theming

You can make use of glamorous’ ThemeProvider component to provide theme information that will be made available to all the components down the tree.

For example, here’s how you would provide a theme from the App component: