title: styled-components toggle classes
body: <p>this.state.checkBool is <code>true</code> / <code>false</code></p>
  
  <p>The HTML structure like this, toggle <code>class1</code> and <code>class2</code></p>
  
  <pre><code>&lt;div class='common class1'&gt;
  &lt;div class='common class2'&gt;
  </code></pre>
  
  <p>css looks like</p>
  
  <pre><code>common {
    display: block;
    background: grey;
  }
  
  .class1 {
    position: absolute;
    left: 1px;
    right: auto;
    top: 2px;
    background: blue;
  }
  
  
  .class2 {
    position: absolute;
    left: auto;
    top: 2px;
    right: 30px;
    background: yellow;
  }
  </code></pre>
  
  <p>The styled component </p>
  
  <pre><code>const Wrapper = styled.div`
    display: block;
    background: grey;
  
    // Should this part use props to check true or false?
  
    ${prosp =&gt; } 
  `
  </code></pre>
  
  <p>I am stuck on how to toggle classes </p>
  
  <pre><code>&lt;Wrapper toggle={this.state.checkBool ? class1 :class2 }/&gt;
  </code></pre>