How to easily inspect styled-components using dev tools?

Question

I am using styled-components in a React project. When the components are rendered in the browser they are assigned a randomly generated classname, for example:

This class name does not help me identify from which component the

came from, so is there a way to do this easily?

P.s. currently I am adding attrs to my styled components so that I can recognise them in dev tools, for example:

const Foo = styled.div.attrs({
   'data-id': 'foo'
})`
    ...
`;

user_8832723 · Answer

For anyone using create-react-app, just substitute

import styled from "styled-components";

to

import styled from "styled-components/macro";

this will make your styled-component classes have the name of their component in them. And you'll be able to know which classes refer to which components just by looking at their class name ;)

user_3472935 · Answer

For anyone using create-react-app, another option is to use the styled components babel macro

npm install --save babel-plugin-macros
Inside your component use import styled from 'styled-components/macro'; instead of import styled from 'styled-components';

You should now see the component name in your dev tools:

user_121946 · Answer

I was looking at doing the same and stumbled on the following as an alternative to attrs:

const Section = styled.div`
  background-color: #06183d;
  color: white;
  padding: 16px;
  margin-top: 16px;
  ${breakpoint("md")`
    border-radius: 5px;
  `}
`

Section.defaultProps = {
  "data-id": "Section"
}

Use React.Component's defaultProps. It keeps the call to styled.div cleaner and should be easier to remove if needed.

Results in:

user_7329732 · Answer

If you use ts-loader or awesome-typescript-loader there is typescript-plugin-styled-components.

How to easily inspect styled-components using dev tools?

5 Answers