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

Question

我正在为我的React-typescript网络应用使用react-scripts-ts和样式组件。使用样式化组件创建的组件在调试时似乎没有显示正确的displayName;相反，他们会显示styled.div或styled.span等后退。

E.g。

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

这将在React dev工具中将 styled.div 显示为显示名称，而不是 Bar 。

PS：Styled-components表示适用于CRA应用程序的babel插件。但是我没有看到关于react-typescript-ts项目是否有类似解决方案的文档。

Answer 1

您可以修改"plugins": [ ["styled-components", { "displayName": true }] ] 以告诉它使用displayname

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

如果你想手动完成，你可以自己编写

babel-plugin-styled-components

您可以使用的软件包可以让您轻松实现这一点。{{1}}例如。{{1}}。 See the styled components docs on tooling

Answer 2

而不是像这样导入样式化组件：

import styled from 'styled-components';

这样导入：

import styled from 'styled-components/macro';

如果这对您不起作用，则可能您需要更新样式化组件或做出反应。可以在styled-components documentation中找到更多信息。