title: adding two classes (active class) using styled-components
body: <p>I am migrating from css to <a href="https://www.styled-components.com" rel="noreferrer"><code>styled-components</code></a>.</p>
  
  <p>My react component looks like the following:</p>
  
  <pre><code>class Example extends React.Component {
  
    ........code here
  
    render() {
      return (
        &lt;div 
          className={ this.state.active ? "button active" : "button" }
          onClick={ this.pressNumber }
         &gt;
            &lt;Number&gt;{ this.props.number }&lt;/Number&gt;
        &lt;/div&gt;
      )
    }
  }
  
  const Number = styled.div`
    color: #fff;
    font-size: 26px;
    font-weight: 300;
  `;
  </code></pre>
  
  <p>and my css looks like this:</p>
  
  <pre><code>.button {
    height: 60px;
    width: 60px;
  }
  
  .active {
    animation-duration: 0.5s;
    animation-name: highlightButton;
  }
  
  
  @keyframes highlightButton {
    0%   {
      background-color: transparent;
    }
    50%  {
      background-color: #fff;
    }
    100%  {
      background-color: transparent;
    }
  }
  </code></pre>
  
  <p>Does anyone know how I can add the active class/add two classes to an element using <code>styled-components</code>? Nothing is jumping out at me from the docs.</p>
  
  <p>If anything is unclear or further information is required please let me know.</p>