title: Add multiple style properties to a single theme property with Styled Components
body: <p>I'm using <a href="https://github.com/styled-components/styled-components" rel="nofollow noreferrer">styled components</a> for a new project, and want to use the theming features of the library. I'm struggling to figure out if there is a good or best practice way of adding multiple style properties to one object (i.e., create a kind of inheritance). What is want is:</p>
  
  <pre><code>// in the theme, define a group of styles for a given component
  // e.g. all fonts have a font-family, weight, size, etc
  const theme = {
    fonts: {
      font-family: ...,
      font-weight: ...,
      font-size: ...,
    }
  }
  
  // then in my styled component,
  // define the multi-line theme, along with component specific styles
  // or even override the theme styles
  const Header = styled.span`
    ${props =&gt; props.theme.fonts};
    text-decoration: underline;
    ...
  `;
  </code></pre>
  
  <p>Right now, it's only apparent to me that you would need to pass the theme property to each style on the component. Is there a pattern that can help reduce some of the repeated code seen in my above example?</p>