title: How to show correct displayName in react-scripts-ts projects when using Styled Components
body: <p>I am using <a href="https://github.com/wmonk/create-react-app-typescript" rel="nofollow noreferrer">react-scripts-ts</a> 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 <code>styled.div</code> or <code>styled.span</code>.</p>
  
  <p>E.g.</p>
  
  <pre><code>const Bar = styled.div`
    background: #ddd;
  `;
  ...
  return &lt;Bar /&gt;;
  </code></pre>
  
  <p>This will show <em>styled.div</em> as display name instead of <em>Bar</em> in the React dev tools. </p>
  
  <p>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.</p>