在 React 中使用样式化组件的悬停效果不起作用

Question

不知道为什么 StyledComponents 中按钮上的悬停效果代码在 React 应用程序中不起作用。你能看看代码吗？谢谢！

 export const StyledButton = styled.button`
  width: 12vh;
  background-color: ${colors.buttonColor};
  -webkit-box-shadow: 0px 0px 35px -4px rgba(237, 38, 38, 0.51);
  box-shadow: 0px 0px 35px -4px rgba(237, 38, 38, 0.51);
  height: 4vh;
  margin-top: 5vh;
  border-radius: 5px;
  padding-bottom: 5px;
  display: flex;
  align-items: center;
  justify-content: center;

  & :hover {
    background-color: hotpink;
  }
`;

    <StyledButton>
          <Link to="/main" style={{ textDecoration: "none" }}>
            <StyledParagraph>Go without</StyledParagraph>
          </Link>
        </StyledButton>

Answer 1

您需要正确的选择器吗？

在带样式的组件中，如果您正在为组件本身设置样式，则不需要写“&:hover”，您可以写“:hover”。

两个选择器都正确，请使用其中一个。如果我将样式应用于带样式的组件本身，我通常不会写“&”符号。

相反

  & :hover {
    background-color: hotpink;
  }

需要写吗

  :hover {
    background-color: hotpink;
  }

下面的代码带有正确的悬停选择器。

export const StyledButton = styled.button`
  width: 12vh;
  background-color: ${colors.buttonColor};
  box-shadow: 0px 0px 35px -4px rgba(237, 38, 38, 0.51);
  height: 4vh;
  margin-top: 5vh;
  border-radius: 5px;
  padding-bottom: 5px;
  display: flex;
  align-items: center;
  justify-content: center;

  :hover {
    background-color: hotpink;
  }
`;

在 React 中使用样式化组件的悬停效果不起作用

Hover effect using Styled Components in in React don't work

hover

reactjs

styled-components