title: Adding active class with styled component not working
body: <p>So My function is:</p>
  
  <pre><code>function onClickChange(props) {
    let MyDiv = document.getElementById('myDIV')
    let InterfaceDesign = document.getElementById('interfaceDesign')
    if (MyDiv.style.display === 'none') {
      MyDiv.style.display = ''
      InterfaceDesign.classList.add('active')
    } else {
      MyDiv.style.display = 'none'
      InterfaceDesign.classList.remove('active')
    }
  }
  </code></pre>
  
  <p>From this function in DOM I can see that it's getting the active class. But from my styled component:</p>
  
  <pre><code>const FirstDivElement = styled.div`
    position: relative;
    overflow: hidden;
    width: 100%;
    background-color: #000;
    &amp;:hover {
      background-color: #e6007e;
      transform: scale(1.05);
    }
    &amp;:active{
      background-color: #e6007e;
    }
  `
  </code></pre>
  
  <p>It is not getting the style of &amp;:active</p>
  
  <p>My div element is:</p>
  
  <pre><code>&lt;div id="interfaceDesign"&gt;
              &lt;div onClick={onClickChange}&gt;
                &lt;ListItems
                  headingText="Interface Design"
                  backgroundImage={props.secondBackgroundImage}
                &gt;
                  &lt;Img
                    style={{
                      height: '50px',
                      width: '50px',
                    }}
                    sizes={props.interfacedesign}
                  /&gt;
                &lt;/ListItems&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div id="myDIV" style={{ display: 'none' }}&gt;
              &lt;InterfaceDesign
                secondBackgroundImage={props.secondBackgroundImage}
                interfacedesignMagenta={props.interfacedesignMagenta}
              /&gt;
            &lt;/div&gt;
            &lt;/div&gt;
  </code></pre>
  
  <p>Can anyone please help? Thank you in advance :D</p>