In addition to traditional CSS, you also have inline styles and CSS-in-JS as options for styling a React application.
However, not all CSS features are supported.
<style> element) and attached into the DOM.
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.
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.
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
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
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
In Radium, you can use the Style component to render a styled element with global styles.
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
suppressStyleInjectionand 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
Here, you can find an example of how it is used.
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.
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.
LogRocket is like a DVR for web apps, recording literally everything that happens on your React app. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred. LogRocket also monitors performance of your app with metrics like client CPU load, client memory usage, and more.
The LogRocket Redux middleware package adds an extra layer of visibility into your user sessions. LogRocket logs all actions and state from your Redux stores.
Modernize how you debug your React apps - Start monitoring for free.