3

I am using react-scripts-ts and styled-components for my React-typescript web app. Components created using styled-components do not seem to show the correct displayName when debugging; instead they show a fallback like styled.div or styled.span.

E.g.

const Bar = styled.div`
  background: #ddd;
`;
...
return <Bar />;

This will show styled.div as display name instead of Bar in the React dev tools.

PS: Styled-components suggests a babel plugin that works for CRA apps. But I see no docs on if there is a similar solution for react-typescript-ts projects.

m3h
  • 231
  • 1
  • 10
  • you need to use the `babel-plugin-styled-components` package, which gives a lot of nice tooling for your styled components. [Docs for reference](https://www.styled-components.com/docs/tooling) – John Ruddell Jun 04 '18 at 07:20
  • Possible duplicate of [How to easily inspect styled-components using dev tools?](https://stackoverflow.com/questions/45504955/how-to-easily-inspect-styled-components-using-dev-tools) – John Ruddell Jun 04 '18 at 07:26

1 Answers1

3

Instead of importing styled-components like this:

import styled from 'styled-components';

Import it like this:

import styled from 'styled-components/macro';

If that isn't working for you it is likely that you need to update styled-components or react. Further information can be found in the styled-components documentation.

Alex Mckay
  • 3,463
  • 16
  • 27