错误：styled_components__WEBPACK_IMPORTED_MODULE_0__.default.FaChevronRight 不是函数答案

【问题标题】：error:styled_components__WEBPACK_IMPORTED_MODULE_0__.default.FaChevronRight is not a function错误：styled_components__WEBPACK_IMPORTED_MODULE_0__.default.FaChevronRight 不是函数
【发布时间】：2021-07-04 02:27:12
【问题描述】：

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

猜想：如何使用 styled-component 设置 react-icon 样式

当我创建 Icon 并放入 ancor 时，上面显示的错误我不知道如何使用 react-icon 设置组件样式

【问题讨论】：

标签： reactjs styled-components react-icons

【解决方案1】：

点符号用于设置 HTML 元素的样式，即button、a、div 等。设置另一个 React 组件样式的正确语法是：

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

见：Extending Styles

【讨论】：

【解决方案2】：

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

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

【讨论】：