title: Combine multiple styled elements with styled-components
body: <p>I know that we can extend or add styling to existing components with styled-components like the <code>Link</code> component of <code>react-router-dom</code>. The said feature is indicated <a href="https://www.styled-components.com/docs/basics#styling-any-components" rel="noreferrer">here</a>. But, my problem is, how can I combine two or more existing components then add some more styles?</p>
  
  <p>In my case, I have a reusable component for text elements like <code>span</code>, <code>p</code> and <code>a</code> with standard font-size, font-weight, etc. At the same time, I want to use the react-router-dom's Link component. Currently, I have something like this:</p>
  
  <pre><code>import styled from 'styled-components';
  import { Link } from 'react-router-dom';
  import { TextElement } from '../common';
  
  /*
  Can I do something like this?
  const MyLink = styled(Link, TextElement)`
      margin: 10px 0;
  `;
  
  or this?
  const MyLink = styled([Link, TextElement])`
      margin: 10px 0;
  `;
  */
  
  const MyPage = props =&gt; (
     &lt;&gt;
         &lt;MyLink to="/next-page" /&gt;
     &lt;/&gt;
  );
  </code></pre>
  
  <p>Any suggestion would be appreciated.</p>
  
  <h2>EDIT</h2>
  
  <p>My <code>TextElement</code> component is just something like this:</p>
  
  <pre><code>const Element = styled.span`
     font-size: 13px;
     font-weight: 500;
  `;
  
  // These styles are sample only. Actual styles depend on a "variant" prop.
  // I did not show it here since it doesn't have to do with the question I'm asking.
  
  export default ({ tag }) =&gt; (&lt;Element as={tag} /&gt;);
  </code></pre>