title: How can I reuse other external styled-components
body: <p>I want to load an external styled component and use extending styles, but it doesn't work. How can I solve this problem?</p>
  <p>common/Button.js</p>
  <pre><code>import styled from 'styled-components';
  
  const StyledButton = styled.button`
    padding: 1rem 2rem;
    border: none;
    border-radius: 8px;
  `;
  
  const Button = ({ children, onClick }) =&gt; {
    return &lt;StyledButton onClick={onClick}&gt;{children}&lt;/StyledButton&gt;;
  };
  
  export default Button;
  </code></pre>
  <p>pages/Login.js</p>
  <pre><code>import Button from '../Components/common/Button';
  import styled from 'styled-components';
  
  const StyledButton = styled(Button)`
    // not working
    color: red; 
  `;
  
  const Login = () =&gt; {
    return (
      &lt;div&gt;
        &lt;StyledButton&gt;Submit&lt;/StyledButton&gt;
      &lt;/div&gt;
    );
  }
  
  export default Login;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/N0HRa.png" rel="nofollow noreferrer">enter image description here</a></p>