如何使用 React 样式的组件正确设置链接以响应图标答案

【问题标题】：How can i proper set link to react icon using React styled components如何使用 React 样式的组件正确设置链接以响应图标
【发布时间】：2022-07-16 22:23:13
【问题描述】：

我想为我的 Facebook 和 Instagram React 图标设置链接。我只有这段代码，这对这个问题很重要。对于项目内部的链接，我使用了 React Router Dom，但我从来不需要链接外部的东西。请问我该怎么做？我尝试了<FacebookIcon to = "" /> 和<FacebookIcon href = "" /> 之类的方法，但什么也没发生。

index.js

<SocialWrapper>
 <FacebookIcon/>
 <InstagramIcon/>
</SocialWrapper>

styles.js

export const SocialWrapper = styled.div`
  width: 100%;
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
`

export const FacebookIcon = styled(FaFacebookF)`
  color: ${white};
  font-size: 2.3rem;
  
  &:hover{
    color: ${red}
  }
`

export const InstagramIcon = styled(FaInstagram)`
  color: ${white};
  font-size: 2.3rem;
    &:hover{
        color: ${red}
    }
`

【问题讨论】：

标签： javascript reactjs hyperlink styled-components

【解决方案1】：

你可以只输入 style 或 css 这个属性

background-image: url()

在哪里传递文件目录或网址的字符串

【讨论】：