title: How to apply Styled Component styles to a custom React component?
body: <p>I have a Styled Component called <code>StyledButton</code> and a React component called <code>AddToCart</code>. I want to apply the styled from <code>StyledButton</code> to <code>AddToCart</code>.</p>
  
  <p>I have already tried the following:</p>
  
  <pre class="lang-js prettyprint-override"><code>import styled from "styled-components";
  import AddToCart from "./AddToCart";
  import StyledButton from "./styles/StyledButton";
  
  const StyledAddToCart = styled(AddToCart)`
    ${StyledButton}
  `;
  
  </code></pre>
  
  <p>What I want to do is already in the documentation at <a href="https://www.styled-components.com/docs/basics#styling-any-components" rel="nofollow noreferrer">https://www.styled-components.com/docs/basics#styling-any-components</a> but this applies new styles to the component. The problem is that I want to use existing styled from a Styled Component (<code>StyledButton</code>)</p>
  
  <p>From the documentation:</p>
  
  <pre class="lang-js prettyprint-override"><code>// This could be react-router-dom's Link for example
  const Link = ({ className, children }) =&gt; (
    &lt;a className={className}&gt;
      {children}
    &lt;/a&gt;
  );
  
  const StyledLink = styled(Link)`
    color: palevioletred;
    font-weight: bold;
  `;
  
  render(
    &lt;div&gt;
      &lt;Link&gt;Unstyled, boring Link&lt;/Link&gt;
      &lt;br /&gt;
      &lt;StyledLink&gt;Styled, exciting Link&lt;/StyledLink&gt;
    &lt;/div&gt;
  );
  </code></pre>
  
  <p>I would really like to have the styles from <code>StyledButton</code> applied to <code>StyledAddToCart</code> without copying the styles manually.</p>