Как правильно отобразить displayName в проектах Reaction-scripts-TS при использовании Styled Components

Question

Я использую response-scripts-ts и styled-компоненты для моего веб-приложения React-typcript.Компоненты, созданные с использованием styled-компонентов, не показывают правильное displayName при отладке;вместо этого они показывают запасной вариант, например styled.div или styled.span.

Например,

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

. В качестве отображаемого имени вместо будет отображаться styled.div .Бар в инструментах React dev.

PS: Styled-components предлагает плагин babel, который работает для приложений CRA.Но я не вижу документов о том, есть ли подобное решение для проектов Reaction-Typecript-TS.

Answer 1

Вместо импорта таких стилевых компонентов:

import styled from 'styled-components';

Импортируйте его так:

import styled from 'styled-components/macro';

Если это не работает для вас, скорее всего, вам нужнообновить styled-компоненты или реагировать.Дополнительную информацию можно найти в документации по стилевым компонентам .

Answer 2

вы можете отредактировать ваш .babelrc, чтобы он указывал использовать отображаемое имя

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

, если вы хотите сделать это вручную, вы можете написать его самостоятельно так, что

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

естьпакеты, которые вы можете использовать, которые облегчают вам задачу, например .. babel-plugin-styled-components. См. Документы по стилизованным компонентам на инструменте