title: Reuse a 'mixin' with Styled Components across different files?
body: <p>How can I reuse a collection of styles with Styled Components across different files? </p>
  
  <p>With SASS I can define and use a mixin like so: </p>
  
  <pre><code>@mixin section( $radius:4px ) {
    border-radius: $radius;
    background: white;
  }
  
  .box { @include section(); }
  </code></pre>
  
  <p>With Styled Components you can extend a style, but this means I would need to import that component into every page. This is pretty cumbersome compared to how variables are available everywhere with the ThemeProvider. </p>
  
  <p><a href="https://www.styled-components.com/docs/basics#extending-styles" rel="noreferrer">https://www.styled-components.com/docs/basics#extending-styles</a></p>