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.
babel-plugin-styled-components
package, which gives a lot of nice tooling for your styled components. Docs for reference – John Ruddell