title: Styled components in a hoc react component
body: <p>I am having two issues with using styled components in a hoc wrapper in react.</p>
  <ol>
  <li>The component is rendered, but not with the background color.</li>
  <li>The ComponentWithAddedColors is not valid typescript. Don't know why.</li>
  </ol>
  <p>Anyone who can help with this?</p>
  <pre><code>interface IProps {
    id: string;
    left: number;
    top: number;
  }
  
  export const Node: React.FC&lt;IProps&gt; = ({ id, left, top }) =&gt; {
    return (
      &lt;Container left={left} top={top}&gt;
        {id}
      &lt;/Container&gt;
    );
  };
  
  function withColors&lt;T&gt;(Component: React.ComponentType&lt;T&gt;) {
    const bg = &quot;hotpink&quot;;
    const ComponentWithAddedColors = styled(Component)`
      ${bg &amp;&amp; `background: ${bg};`}
    `;
    const result: React.FC&lt;T&gt; = (props) =&gt; (
      &lt;ComponentWithAddedColors {...props} /&gt;
    );
    return result;
  }
  
  const DraggableNode = withColors(Node);
  export default DraggableNode;
  </code></pre>
  <p>I have made a code sandbox to illustrate the issue:
  <a href="https://codesandbox.io/s/styled-hoc-xgduo?file=/src/Components/Node/Node.tsx" rel="nofollow noreferrer">https://codesandbox.io/s/styled-hoc-xgduo?file=/src/Components/Node/Node.tsx</a></p>