error:styled_components__WEBPACK_IMPORTED_MODULE_0__.default.FaChevronRight is not a function

Question

**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 的样式

When i create Icon and put in ancor the error above show I do not know how to style component with react-icon

Answer 1

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

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

Answer 2

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

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

参见：Extending Styles

error:styled_components__WEBPACK_IMPORTED_MODULE_0__.default.FaChevronRight is not a function

error:styled_components__WEBPACK_IMPORTED_MODULE_0__.default.FaChevronRight is not a function

reactjs

styled-components

react-icons