样式组件按钮 href/onclick 不工作

Question

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

按钮出现了，当我将鼠标悬停在上面时，它确实变黄了，但是我悬停时没有抓取鼠标，也没有单击时按钮打开 google

请帮忙:)

我尝试只使用 href 属性，例如 https://www.styled-components.com/ 在主网站上使用

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

Answer 1

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

现在可以像网站一样添加Styled Component了：

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

See this demo

样式组件按钮 href/onclick 不工作

Styled-Component Button href/onclick not working

html

css

reactjs

gatsby

styled-components