title: How to pass Styled-Component theme variables to Components?
body: <p>Within my React+StyledComponent app, I have a theme file like so:</p>
  
  <p>theme.js:</p>
  
  <pre><code>const colors = {
    blacks: [
      '#14161B',
      '#2E2E34',
      '#3E3E43',
    ],
  };
  
  const theme = {
    colors,
  };
  
  export default theme;
  </code></pre>
  
  <p>Currently, I can easily use these colors to style my components like so:</p>
  
  <pre><code>const MyStyledContainer = styled.div`
    background-color: ${(props) =&gt; props.theme.colors.blacks[1]};
  `;
  </code></pre>
  
  <p><strong>The problem is, how do I pass blacks[1] to a Component as the prop of the color to use like so:</strong></p>
  
  <pre><code>&lt;Text color="black[1]"&gt;Hello&lt;/Text&gt;
  </code></pre>
  
  <p>Where Text.js is:</p>
  
  <pre><code>const StyledSpan = styled.span`
    color: ${(props) =&gt; props.theme.colors[props.color]};
  `;
  
  const Text = ({
    color,
  }) =&gt; {
    return (
      &lt;StyledSpan
        color={color}
      &gt;
        {text}
      &lt;/StyledSpan&gt;
    );
  };
  
  Text.propTypes = {
    color: PropTypes.string,
  };
  
  export default Text;
  </code></pre>
  
  <p>Currently the above is silently failing and rending the following in the DOM:</p>
  
  <pre><code>&lt;span class="sc-brqgn" color="blacks[1]"&gt;Hello&lt;/span&gt;
  </code></pre>
  
  <p>Any ideas on how I can get this to work? Thank you</p>