错误：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;
`

见：Extending Styles

,

这是一个自定义组件，所以你必须用括号把它包起来：

const Icon = styled(FaChevronRight)`
  width:4px;
  height:9px;
  border:2px solid  #074EE8;
`