我做了这些部件：

<UserImg imgUrl={userPhoto}>
  <DropDown>
    <div onClick={handleAuth}>Sign Out</div>
  </DropDown>
</UserImg>

const DropDown = styled.div`
  letter-spacing: 0.2em;
  position: relative;
  top: 7vh;
  left: 23vw;
  border-radius: 2px;
  text-transform: uppercase;
  transition: all 0.5s ease-in;
  border: 2px solid red;
  div {
    padding: 0.3em;
  }
`;

const UserImg = styled.a`
  background-image: url(${(props) => props.imgUrl});
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 30%;
  display: inline-block;
  cursor: pointer;
  position: relative;
  height: 12vh;
  width: 5vw;
  left: 25vw;
  border: 2px solid white;
  border-radius: 50%;
  &:hover {
    ${DropDown} {
      visibility: visible;
      border: 1px solid white;
      border: transparent;
      cursor: pointer;
    }
  }
`;

UserImg组件工作正常，但DropDown组件未显示。
我希望显示DropDown组件。