javascript - 在 next.js 的 中不起作用

Question

尝试环绕我在导航栏中创建的 a 如下所示:

  <NavBtn>
    <Link href="/contact" passHref>
      <Button>
        Contact Me
      </Button>
    </Link>
  </NavBtn>

这是我的自定义 Button.js

const StyledButton = styled.button`
  height: 45px;
  width: 130px;
  background: #908db9;
  border: none;
  border-radius: 4px;
  outline: none;
  color: #fafafa;
  font-size: 1.05rem;
  font-weight: 500;
  
  &:hover {
    background: #b8b4f0;
  }
`

const Button = ({ children }) => {
    return  <StyledButton><a onClick={() => console.log("clicked")}>{children}</a></StyledButton>
}

基本上，我不能像正常行为那样点击按钮。但我无法解决问题的来源:(

请指教，因为我对自己做错的事情有些迷茫。如果需要更多信息，请告诉我!提前致谢。

Answer 1

只要包裹在Extra Div里面就可以解决问题。在哪里使用按钮组件