How to show correct displayName in react-scripts-ts projects when using Styled Components

Question

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.

Answer 1

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.