如何解决错误:styled_components__WEBPACK_IMPORTED_MODULE_0__.default.FaChevronRight 不是函数
**import styled from 'styled-components';
import { FaChevronRight } from 'react-icons/fa';
const ButtonSty = styled.button`
width:128px;
height:32px;
border:2px solid #074EE8;
Box-sizing:border-Box;
border-radius:4px;
`
const Ancor = styled.a`
font-style:normal;
font-weight:normal;
font-size:16px;
line-height:18px;
color:#074EE8;
text-decoration:none;
`
const Icon = styled.FaChevronRight`
width:4px;
height:9px;
border:2px solid #074EE8;
`
function Button() {
return (
<div>
<ButtonSty> <Ancor href="#">Saznaj vise **<Icon />**</Ancor> </ButtonSty>
</div>
)
}
export default Button**
Guestion:如何使用样式化组件为 react-icon 设置样式
当我创建 Icon 并放入 ancor 时,上面的错误显示 我不知道如何使用 react-icon 设置组件样式
解决方法
点符号用于样式化 HTML 元素,即 button
、a
、div
等。样式化另一个 React 组件的正确语法是:
const Icon = styled(FaChevronRight)`
width: 4px;
height: 9px;
border: 2px solid #074EE8;
`
,
这是一个自定义组件,所以你必须用括号把它包起来:
const Icon = styled(FaChevronRight)`
width:4px;
height:9px;
border:2px solid #074EE8;
`
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。