样式化组件按钮 href/onclick 不起作用

Posted 2023-02-22

【中文标题】样式化组件按钮 href/onclick 不起作用

【英文标题】：Styled-Component Button href/onclick not working

【发布时间】：2019-12-06 09:54:11

【问题描述】：

我正在学习 JS/试图使用 gatsby 建立一个网站，需要使用按钮，并且一直在使用样式组件。

按钮显示出来，当我将鼠标悬停在它上面时它会变成黄色，但是当我悬停时我没有得到抓取鼠标，也没有当我点击按钮时打开谷歌

请帮忙:)

我尝试在主网站上使用像 https://www.styled-components.com/ 这样的 href 属性

<Button
     href="https://github.com/styled-components/styled-components"
     target="_blank"
     rel="noopener"
     primary
   >

但也没有用

这是样式化的按钮组件

const Button = styled.button`
  border: none;
  height: 3rem;
  width: 50%;
  border-radius: .5rem;
  margin: 2% 25% 3% 25%;
  z-index:5;

  background-color: $props => props.theme.grey;
  color: $props => props.theme.offWhite;
  &:hover 
    background: $props => props.theme.yellow;
    color: $props => props.theme.grey;
  

这是有问题的代码

<button onclick="window.open('https://www.google.com', '_blank');"> work</button>
<Button click=() => 'https://www.google.com';>pleaseWork </Button>

【问题讨论】：

按钮没有 href 属性。你需要使用锚标签

【参考方案1】：

您应该添加styled.a 而不是styled.button 才能访问href 属性。

现在你可以像网站一样添加样式化组件了：

<Button
     href="https://github.com/styled-components/styled-components"
     target="_blank"
     rel="noopener"
     primary
   >

See this demo