如何在使用样式化组件时在react-scripts-ts项目中显示正确的displayName

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 .

Eg

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 .

Answer 2

you can edit your .babelrc to tell it to use displayname

"plugins": [
   ["styled-components", {
      "displayName": true
   }]
]

if you want to do it manually you can write it yourself like so

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

there are packages that you can use that make this easy for you though.. babel-plugin-styled-components for example. See the styled components docs on tooling