title: Pass props to styled-components
body: <p>I am querying data for my react site using graphql from my CMS (prismic.io) in order to produce color themed pages. I want to pass a variable or props into my styled component to change the background color based on what is sent back from the CMS.</p>
  
  <p>In the below example, my graphql query will return a HEX that has been inputted by the user, this would then be applied to buttons etc to theme that page. </p>
  
  <p>The colour can and will change from page to page as the user will be selecting it within the CMS.</p>
  
  <p>Any help would be appreciated. Code example below:</p>
  
  <h1>Props</h1>
  
  <p><code>props.data.case_study_color</code></p>
  
  <h1>Component</h1>
  
  <pre><code>const ContactButton = styled.button `
    background: #004655;
    color: #fff;
    font-size: 2rem;
    padding: 10px;
  `;
  </code></pre>