title: Hover in styled component not working, other styles working fine
body: <p>When I hover this Button component, it does not change color when it hovers. Nothing happens. When I change the other styling before the &amp;:hover, it gets updated. I tried doing this in css as well but still didn't work.</p>
  <pre><code>import styled from &quot;styled-components&quot;;
  
  const Button = styled.button`
    color: black;
    padding: 15px 40px;
    border-radius: 4px;
    font-weight: normal;
    text-transform: uppercase;
    transition: all 0.2s ease-in-out;
    margin: 1rem;
    width: 40%;
  
    &amp;:hover {
      color: rgba(255, 255, 255, 1);
      box-shadow: 0 5px 15px rgba(145, 92, 182, 0.4);
    }
  `;
  
  export default Button;
  </code></pre>
  <p>Code where button is being used</p>
  <pre><code>import Images from &quot;../components/slidingbackground&quot;;
  import Button from &quot;../components/HomeButton.styled&quot;;
  
  const Home = () =&gt; {
    return (
      &lt;div className=&quot;home-page-container&quot;&gt;
        &lt;div className=&quot;home-text-container&quot;&gt;
          &lt;h1 className=&quot;home-text-main&quot;&gt;
            Mobile &lt;br /&gt; Vehicle &lt;br /&gt; Verifier
          &lt;/h1&gt;
          &lt;div className=&quot;white-box&quot;&gt;
            &lt;span className=&quot;underline&quot;&gt;
              &lt;h2 id=&quot;verify-text&quot;&gt;Verify Your Vehicle&lt;/h2&gt;
            &lt;/span&gt;
            &lt;h3&gt;With over 30 years of experience in Southern California,&lt;/h3&gt;
            &lt;h4&gt;I can inspect any non-salvaged vehicle, dealers welcome.&lt;/h4&gt;
            &lt;div className=&quot;button-container&quot;&gt;
              &lt;Button&gt;Contact Me&lt;/Button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;Images /&gt;
      &lt;/div&gt;
    );
  };
  
  export default Home;
  </code></pre>