赵花花5070

React + Antd 填坑（一）如何解决antd中 Select选择器下的属性【suffixIcon】不生效的问题

无意之中在网上看到有同学提问关于 antd 下 Select 的 suffixicon不生效的问题，看到最后也没有给出一个肯定的答案，所以专门就这个问题给自己做个笔记，另外也可能会帮助到一部分同学能够快速的解决问题。

废话不多说，直接上解决方案，总共有两种解决方式：

第一种：自定义SVG图标并作为一个组件使用

import React, { Component } from 'react'
import { Select } from 'antd';
import Icon from '@ant-design/icons';

const { Option } = Select;

// 自定义一个SVG图标
const HeartSvg = () => (
    
);

export default class MyHome extends Component {
    render() {
        return (
            
                
            
        )
    }
}

第二种：直接使用官网给的Icon图标

import React, { Component } from 'react'
import { Select } from 'antd';

const { Option } = Select;
// 直接引入一个icon图标
import { UserOutlined } from '@ant-design/icons';

export default class MyHome extends Component {
    render() {
        return (
            
                
            
        )
    }
}

展示效果：

可以看到上面的两种方案是成功换掉了向下的图标。但是以上两种解决方案都需要注意一个小细节，