title: Styled component with access to React component state?
body: <p>How can I get a styled component to render different css rules depending on the state of the React component in which it is rendered?</p>
  
  <p>The below does not work:</p>
  
  <pre class="lang-js prettyprint-override"><code>class Container extends React.Component&lt;ContainerProps, ContainerState&gt; {
    constructor(props: ContainerProps) {
      super(props);
      this.state = {
        highlight: true,
        dark: false
      };
    }
  
    OuterWrapper = styled.div`
      display: inline-block;
      padding: 20px;
      ${this.state.dark &amp;&amp; `
        background-color: 'gray';
      `};
    `;
  
      return (
        &lt;this.OuterWrapper&gt;
            ...
        &lt;/this.OuterWrapper&gt;
      );
  
  }
  </code></pre>
  
  <blockquote>
    <p>TypeError: Cannot read property 'dark' of undefined
        at new Container</p>
  </blockquote>