[英]Styled-Component Button href/onclick not working
我正在学习 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>
您应该添加styled.a
not styled.button
以访问href
styled.button
。
现在您可以像网站一样添加样式化组件:
<Button
href="https://github.com/styled-components/styled-components"
target="_blank"
rel="noopener"
primary
>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.