title: Extending styles with styled-components not working
body: <p>I'm trying to extend styles for a react component using <code>styled-components</code> but is not working.
  AFAIK, I'm doing it the right way, but perhaps I'm missing something...
  Here is what I have:</p>
  
  <pre><code>import React from "react";
  import styled from "styled-components";
  
  const TextContainer = ({ text }) =&gt; {
    return &lt;p dangerouslySetInnerHTML={{ __html: text }} /&gt;;
  };
  
  const Paragraph = styled(TextContainer)`
    background: red;
  `;
  
  class Home extends React.Component {
    render() {
      const { t } = this.props;
      return &lt;Paragraph text="This is a test" /&gt;;
    }
  }
  
  export default Home;
  </code></pre>
  
  <p>Of course, the expected result is to have a red background on <code>p</code>, but right now the output looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/dts0t.png" rel="noreferrer"><img src="https://i.stack.imgur.com/dts0t.png" alt="enter image description here"></a></p>
  
  <p>Any idea on how to solve this? Probably I'm missing something, but I can't realize what.</p>
  
  <p>Thanks is advance!</p>