Your Styled Components Tooling Checklist

3 min readJul 2, 2019

I was surprised how many roadblocks I hit after the initial setup of Styled Components. When you start using them in practice, you may find that there is more to it than just an npm install styled-components.

This checklist is based on my experience, so it is not necessarily exhaustive. It will cover how to get Styled Components working with the following:

Debugging
Jest & Snapshot Testing
Flow Typing
IFrames

Basic Debugging

By default, styled components will spit out hashed IDs in the DOM. When you are trying to debug styling issues in dev tools, you’ll quickly realize how hard it is to find the component you’re looking for.

Luckily, there is a babel plugin that resolves this and adds some other features you may find necessary:

consistently hashed component classNames between environments
your component name will be included in the class name (easier debugging)
additional minification types that optimize the transpiling of template literals

All you have to do is npm install --save-dev babel-plugin-styled-components. Then whenever you import styled components, make sure you add /macro at the end. For example:

import styled from 'styled-components/macro'

Create React App Users

Since you can’t directly configure babel plugins without ejecting, you can make use of babel plugin macros. Run npm install babel-plugin-macros to get all the debugging goodies you need, along with some optimizations.

Then add this to your .babelrc

{
  "plugins": ["babel-plugin-styled-components"]
}

Read more about the plugin here

Jest & Snapshot Testing

Getting Jest and snapshot tests to play nice with styled components is as simple as:

npm install --save-dev jest-styled-components

For the Enzyme Users

In order to get snapshot tests to work with shallow / full rendering, install the following:

npm install --save-dev enzyme-to-json

Flow

If you’re using Flow, you are going to need flow-typed to stub the component types.

Run npm install flow-typed
add ‘flow-typed: flow-typed’ to your scripts
install flow-types for styled components with npm run flow-typed install. Replace the version of styled components with whatever version you are using

IFrames

Iframes complicate things quite a bit. CSS styles created by styled components won’t propagate to your iframe correctly. Luckily, there is a library for that!

Run npm install --save react-styled-frame

The example in the docs is pretty self explanatory, so I’ll use the snippet from there:

import StyledFrame from 'react-styled-frame'export default () => (
  <ThemeProvider theme={{ mode: 'dark' }}>
    <StyledFrame
      style={{
        width: 320,
        margin: '0 auto'
      }}
    >
      <InnerBox>
        <Text>
          Hello iframe!
        </Text>
      </InnerBox>
    </StyledFrame>
  </ThemeProvider>
)

Here are the docs

Server Side Rendering

If you installed the babel plugin, this one is already taken care of. The plugin ensures that the IDs of your components are consistent on the server and client to prevent mismatches.