title: Why is my CSS not applying to my react component?
body: <p>I have a react button. I use this react button throughout my website with no issues, besides in one section. I have two buttons and I want them to have better animation than simple fade in and fade out. I have gone and written code for more intense animation, but--much to my chagrin--the css doesn't change/work. Attached below are my global styles, HeroStyles, and Hero.js. Any idea why? am I inadvertently inheriting something? Any comments on how my code looks too?</p>
  <p>GlobalStyles.js</p>
  <pre><code>import styled, { createGlobalStyle } from 'styled-components';
  
  const GlobalStyle = createGlobalStyle`
    *{
      box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    }
  `;
  
  export const Container = styled.div`
      width: 100%;
      max-width: 1300px;
      margin-right: auto;
      margin-left: auto;
      padding: 0 50px;
      @media screen and (max-width: 960px) {
          padding: 0 30px;
      }
  `;
  export const MainHeading = styled.h1`
      font-size: clamp(2.3rem, 6vw, 4.5rem);
      margin-bottom: 2rem;
      color: ${({ inverse }) =&gt; (inverse ? '$403ae3' : '#fff')};
      width: 100%;
      letter-spacing: 4px;
      text-align: center;
  `;
  
  export const Heading = styled.h2`
      font-size: clamp(1.3rem, 13vw, 3.1rem);
      margin: ${({ margin }) =&gt; (margin ? margin : '')};
      margin-bottom: ${({ mb }) =&gt; (mb ? mb : '')};
      margin-top: ${({ mt }) =&gt; (mt ? mt : '')};
      color: ${({ inverse }) =&gt; (inverse ? '$403ae3' : '#fff')};
      letter-spacing: 0.4rem;
      line-height: 1.06;
      text-align: center;
      width: ${({ width }) =&gt; (width ? width : '100%')};
  `;
  export const TextWrapper = styled.span`
      color: ${({ color }) =&gt; (color ? color : '')};
      font-size: ${({ size }) =&gt; (size ? size : '')};
      font-weight: ${({ weight }) =&gt; (weight ? weight : '')};
      letter-spacing: ${({ spacing }) =&gt; (spacing ? spacing : '')};
      padding: ${({ padding }) =&gt; (padding ? padding : '')};
      margin: ${({ margin }) =&gt; (margin ? margin : '')};
      margin-bottom: ${({ mb }) =&gt; (mb ? mb : '')};
      margin-top: ${({ mt }) =&gt; (mt ? mt : '')};
  `;
  export const Section = styled.section`
      padding: ${({ padding }) =&gt; (padding ? padding : '140px 0')};
      margin: ${({ margin }) =&gt; (margin ? margin : '')};
      background: ${({ inverse }) =&gt; (inverse ? 'white' : '#071c2f')};
      position: ${({ position }) =&gt; (position ? position : '')};
      width: ${({ width }) =&gt; (width ? width : 'auto')};
      min-width: ${({ minWidth }) =&gt; (minWidth ? minWidth : 'auto')};
      max-width: ${({ maxWidth }) =&gt; (maxWidth ? maxWidth : 'auto')};
      height: ${({ height }) =&gt; (height ? height : 'auto')};
      max-height: ${({ maxHeight }) =&gt; (maxHeight ? maxHeight : 'auto')};
      min-height: ${({ minHeight }) =&gt; (minHeight ? minHeight : 'auto')};
      @media screen and (max-width: 768px) {
          padding: ${({ smPadding }) =&gt; (smPadding ? smPadding : '70px 0')};
      }
  `;
  
  export const Row = styled.div`
      display: flex;
      justify-content: ${({ justify }) =&gt; (justify ? justify : '')};
      align-items: ${({ align }) =&gt; (align ? align : '')};
      gap: ${({ gap }) =&gt; (gap ? gap : '')};
      padding: ${({ padding }) =&gt; (padding ? padding : '')};
      margin: ${({ margin }) =&gt; (margin ? margin : '')};
      position: ${({ position }) =&gt; (position ? position : '')};
      width: ${({ width }) =&gt; (width ? width : 'auto')};
      min-width: ${({ minWidth }) =&gt; (minWidth ? minWidth : 'auto')};
      max-width: ${({ maxWidth }) =&gt; (maxWidth ? maxWidth : 'auto')};
      height: ${({ height }) =&gt; (height ? height : 'auto')};
      max-height: ${({ maxHeight }) =&gt; (maxHeight ? maxHeight : 'auto')};
      min-height: ${({ minHeight }) =&gt; (minHeight ? minHeight : 'auto')};
      flex-wrap: ${({ wrap }) =&gt; (wrap ? wrap : '')};
  `;
  
  export const Column = styled.div`
      display: flex;
      flex-direction: column;
      justify-content: ${({ justify }) =&gt; (justify ? justify : '')};
      align-items: ${({ align }) =&gt; (align ? align : '')};
      gap: ${({ gap }) =&gt; (gap ? gap : '')};
      padding: ${({ padding }) =&gt; (padding ? padding : '')};
      margin: ${({ margin }) =&gt; (margin ? margin : '')};
      position: ${({ position }) =&gt; (position ? position : '')};
      width: ${({ width }) =&gt; (width ? width : 'auto')};
      min-width: ${({ minWidth }) =&gt; (minWidth ? minWidth : 'auto')};
      max-width: ${({ maxWidth }) =&gt; (maxWidth ? maxWidth : 'auto')};
      height: ${({ height }) =&gt; (height ? height : 'auto')};
      max-height: ${({ maxHeight }) =&gt; (maxHeight ? maxHeight : 'auto')};
      min-height: ${({ minHeight }) =&gt; (minHeight ? minHeight : 'auto')};
  `;
  
  export const Button = styled.button`
      border-radius: 4px;
      background: transparent;
      white-space: nowrap;
      padding: 10px 20px;
      font-size: 18px;
      color: #fff;
      outline: none;
      border: 2px solid #fff;
      cursor: pointer;
      overflow: hidden;
      position: relative;
      &amp;:before {
          background: #fff;
          content: '';
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          z-index: -1;
          transition: all 0.6s ease;
          width: 100%;
          height: 0%;
          transform: translate(-50%, -50%) rotate(45deg);
      }
      &amp;:hover:before {
          height: 500%;
      }
      &amp;:hover {
          color: black;
      }
  `;
  
  export default GlobalStyle;
  </code></pre>
  <p>HeroStyles.js</p>
  <pre><code>import styled from 'styled-components';
  import { Button, MainHeading } from '../../globalStyles';
  import { motion } from 'framer-motion';
  
  export const HeroSection = styled.section`
      height: 100vh;
      background-position: center;
      background-size: cover;
      padding-top: clamp(70px, 25vh, 220px);
      box-shadow: inset 0 0 0 1000px rgba (0, 0, 0, 0.2);
      background:linear-gradient(90deg, hsla(196, 78%, 62%, 1) 0%, hsla(201, 66%, 53%, 1) 27%, hsla(207, 74%, 47%, 1) 51%, hsla(213, 79%, 43%, 1) 76%, hsla(221, 95%, 42%, 1) 100%);    
  `;
  
  export const HeroHeading = styled(MainHeading)`
      margin-top: 75px;
      margin-bottom: 45px;
  `;
  
  export const HeroText = styled.p`
      margin-bottom: 75px;
      font-size: clamp(0.9rem, 2vw, 1.3rem);
      line-height: 24px;
      text-align: center;
      letter-spacing: 2px;
      color: #fff;
  `;
  
  export const ButtonWrapper = styled.div`
      width: 100%;
      display: flex;
      justify-content: center;
      flex-flow: wrap;
      gap: clamp(1.5rem, 2.5vw, 5rem);
  `;
  
  export const HeroButton1 = styled(Button)`
      font-size: clamp(1.2rem, 2.75vw, 1.75rem);
      cursor: pointer;
      outline: none;
      border: 1px solid rgba(234, 234, 234, .25);
      text-decoration:none;
      background: none;
      white-space: nowrap;
      outline: none;
      position: realtive;
      &amp;:hover {
          background-color: rgba(234, 234, 234, .25);
          color: white;
          transition: background-color 0.2s ease;
      }
  `;
  
  // export const HeroButton1 = styled(Button)`
  //  position: relative;
  //  margin: 0 15px;
  //  padding: 10px 30px;
  //  color: white;
  //  text-decoration: none;
  //  text-transform: uppercase;
  //  font-size: 20px;
  //  &amp;:before {
  //      content: '';
  //      position: absolute;
  //      top: 0;
  //      left: 0;
  //      width: 10px;
  //      height: 10px;
  //      border-top: 2px solid rgba(234, 234, 234, .25);
  //      border-left: 2px solid rgba(234, 234, 234, .25);
  //      transition: 0.5s; 
  //  }
  //  &amp;:hover:before {
  //      width: 100%;
  //      height: 100%;
  //  }
  //  &amp;:after {
  //      content: '';
  //      position: absolute;
  //      bottom: 0;
  //      right: 0;
  //      width: 10px;
  //      height: 10px;
  //      border-bottom: 2px solid rgba(234, 234, 234, .25);
  //      border-right: 2px solid rgba(234, 234, 234, .25);
  //      transition: 0.5s; 
  //  }
  //  &amp;:hover:after {
  //      width: 100%;
  //      height: 100%;
  //  }
  // `
  
  export const HeroButton2 = styled(Button)`
      font-size: clamp(1.2rem, 2.75vw, 1.75rem);
      cursor: pointer;
      outline: none;
      border: 1px solid rgba(234, 234, 234, .25);
      text-decoration:none;
      background: none;
      white-space: nowrap;
      outline: none;
      position: realtive;
      &amp;:hover {
          background-color: rgba(234, 234, 234, .25);
          color: white;
          transition: background-color 0.2s ease-in;
  }
  `;
  </code></pre>
  <p>Hero.js</p>
  <pre><code>import React from 'react';
  import { Link } from 'react-router-dom';
  import { Button, Container, MainHeading } from '../../globalStyles';
  import { HeroSection, HeroText, ButtonWrapper, HeroButton1, HeroHeading, HeroButton2 } from './HeroStyles';
  
  const Hero = () =&gt; {
      return (
          &lt;HeroSection&gt;
              &lt;Container&gt;
                  &lt;HeroHeading&gt;Title&lt;/HeroHeading&gt;
                  &lt;HeroText&gt;
                      Subtitle
                  &lt;/HeroText&gt;
                  &lt;ButtonWrapper&gt;
                      &lt;Link to=&quot;signup&quot;&gt;
                          &lt;HeroButton1&gt;Get Started&lt;/HeroButton1&gt;
                      &lt;/Link&gt;
                      &lt;Link to=&quot;whitepaper&quot;&gt; 
                          &lt;HeroButton2&gt;Learn More&lt;/HeroButton2&gt;
                      &lt;/Link&gt;
                  &lt;/ButtonWrapper&gt;
              &lt;/Container&gt;
          &lt;/HeroSection&gt;
      );
  };
  
  export default Hero;
  </code></pre>
  <p>The buttons in question are HeroButton1 and HeroButton2. I commented out the code for HeroButton1 that I want the button to look like. Thanks for your help!</p>