问悬停在已设置样式的组件中不工作，其他样式工作正常

EN

import styled from "styled-components";

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%;

  &:hover {
    color: rgba(255, 255, 255, 1);
    box-shadow: 0 5px 15px rgba(145, 92, 182, 0.4);
  }
`;

export default Button;

import Images from "../components/slidingbackground";
import Button from "../components/HomeButton.styled";

const Home = () => {
  return (
    <div className="home-page-container">
      <div className="home-text-container">
        <h1 className="home-text-main">
          Mobile <br /> Vehicle <br /> Verifier
        </h1>
        <div className="white-box">
          <span className="underline">
            <h2 id="verify-text">Verify Your Vehicle</h2>
          </span>
          <h3>With over 30 years of experience in Southern California,</h3>
          <h4>I can inspect any non-salvaged vehicle, dealers welcome.</h4>
          <div className="button-container">
            <Button>Contact Me</Button>
          </div>
        </div>
      </div>
      <Images />
    </div>
  );
};

export default Home;