title: conditional rendering in styled components
body: <p>How can I use conditional rendering in styled-components to set my button class to active using styled-components in React? </p>
  
  <p>In css I would do it similarly to this:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;button className={this.state.active &amp;&amp; 'active'}
        onClick={ () =&gt; this.setState({active: !this.state.active}) }&gt;Click me&lt;/button&gt;
  </code></pre>
  
  <p>In styled components if I try to use '&amp;&amp;' in the classname it doesn't like it.</p>
  
  <pre><code>import React from 'react'
  import styled from 'styled-components'
  
  const Tab = styled.button`
    width: 100%;
    outline: 0;
    border: 0;
    height: 100%;
    justify-content: center;
    align-items: center;
    line-height: 0.2;
  `
  
  export default class Hello extends React.Component {
    constructor() {
      super()
      this.state = {
        active: false
      }  
      this.handleButton = this.handleButton.bind(this)
  }
  
    handleButton() {
      this.setState({ active: true })
    }
  
    render() {
       return(
         &lt;div&gt;
           &lt;Tab onClick={this.handleButton}&gt;&lt;/Tab&gt;
         &lt;/div&gt;
       )
    }}
  </code></pre>