In addition to traditional CSS, you also have inline styles and CSS-in-JS as options for styling a React application.

With inline styles, you pass a JavaScript object to the style attribute:

However, not all CSS features are supported.

On the other hand, CSS-in-JS is a technique where JavaScript is used to style components. When this JavaScript is parsed, CSS is generated (usually as a <style>

This functionality is implemented by third-party libraries. For example, here’s the previous example implemented with Aphrodite:

Other libraries I can recommend are:

I’m not completely in favor of CSS-in-JS, but I have to say that some of these libraries add support for features you might find helpful in certain situations.

In this post, I’ll talk about five things you can do in CSS-in-JS with the above libraries that I bet you didn’t know about.

1. You can refer to other styled components

But they also allow you to target other styled components (like if you were using CSS selectors):

This is useful when it is combined pseudo-classes, for example, to change the color of a component on hover:

2. You can extend the features of some libraries with JSS (or other libraries)

Let’s say you’ve used Aphrodite to style your application and now you need to support themes.

The problem is that Aphrodite doesn’t support theming in an easy way. At least not as easy as Emotion does.

However, there are two projects that bridge the core of JSS with Aphrodite and styled-components, aphrodite-jss and styled-jss.

This way, you can keep the good parts of Aphrodite (or styled-components) and use all the features and plugins of JSS, from rule caching to rule isolation, and for themes, the theming package, which provides the following high-order components:

• ThemeProvider, which passes a theme object down the react tree by context.
• withTheme, which allows you to receive a theme object and its updates as a property.

For example:

In the particular case of Aphrodite and themes, as another example, you can also use react-with-styles, which interfaces with Aphrodite and JSS, among other, to access theme information when defining styles.

3. Chain multiple animations with keyframes

Unlike inline styles, CSS-in-JS allows you to define animations using keyframes. For example, this is how it’s done with styled-components:

But what not many people know is that you can chain multiple animations by using more than one keyframes objects in the animation property.

Here’s the above example modified to combine two animations:

Radium is another library that supports multiple animations by passing an array of keyframes objects as the value of the animationName property:

4. Declare global styles

Everything in CSS is global, and one of the purposes of using CSS-in-JS is to eliminate global style definitions.

However, there may be valid uses of global styles, for example, when you want to apply the same font styles to every element in your page.

Of course, you can always use traditional CSS, importing it via Webpack or declaring it in the index.html file.

But if you’re serious about using JavaScript for all your styles, some libraries actually allow you to define global styles via helper components or extensions/plugins.

In Radium, you can use the Style component to render a styled element with global styles.

For example:

Will return:

JSS uses a plugin to write global styles:

And in Aphrodite, you can use a third-party extension to do this:

Or aphrodite-jss to use the global JSS plugin.

5. Test component with styles in unit tests

Some libraries contain utilities for testing components with styles.

Aphrodite provides undocumented (at least at the time of writing this) object, StyleSheetTestUtils, which is only available for non-production environments (process.env.NODE_ENV !== 'production') and has three methods:

• suppressStyleInjection, which prevent styles from being injected into the DOM and it’s useful when you want to test the output of Aphrodite components when you have no DOM.
• clearBufferAndResumeStyleInjection, which does the opposite of suppressStyleInjection and should be paired with it.
• getBufferedStyles, which returns a string of buffered styles which have not been flushed.

Here’s an example of how they are used:

Radium is another example. It has a TestMode object for controlling internal state and behavior during tests with the methods clearState, enable and disable.

Here, you can find an example of how it is used.

Conclusion

CSS-in-JS is a technique for styling applications with JavaScript, and you can do interesting things with the libraries that implement it.

In this post, I have shown you five things that probably you didn’t know you can do with some of these libraries. Of course, not all libraries are created equal and some things only apply to specific libraries.

On this page, you can find a playground where you can test and compare many CSS-in-JS libraries.

On the other hand, there are other libraries that are taking the concept of CSS, JavaScript, and types a little bit further.

One of these libraries is stylable, a component-based library with a preprocessor that converts Stylable’s CSS into minimal and cross-browser vanilla CSS.

Here’s a great presentation about this library and CSS-in-JS in general. Totally recommended.