2 
**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：如何使用 styled-component 设置 react-icon 样式

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

4

2 回答 2

3

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

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

请参阅：扩展样式

于 2021-04-08T08:39:29.887 回答
1

这是一个自定义组件，因此您必须用括号括起来：

const Icon = styled(FaChevronRight)`
  width:4px;
  height:9px;
  border:2px solid  #074EE8;
`
于 2021-04-08T08:39:17.813 回答