如何更改material-ui选择字段中的下拉图标？

Question

我正在使用material-ui选择字段。我想将给定的下拉图标更改为其他字体图标。如何实现呢？我看不到任何替代此样式的选项

Answer 1

如今，对我来说最好的方式就是

import Select from '@material-ui/core/Select';
import Person from '@material-ui/icons/Person';
 <Select
   IconComponent = {Person}
 />

无需任何 css 添加即可完美运行。

Answer 2

IconComponent={(props) => (<ExpandMoreOutlinedIcon {...props}/>)}

Answer 3

在最新的Material-ui v1.4.0中。有一个属性IconComponent可以接收功能：

import Select from '@material-ui/core/Select';
import Person from '@material-ui/icons/Person';
<Select
  IconComponent={() => (
    <Person />
  )}>

另外，如果图标不可单击，则需要添加CSS { pointer-events: none }

Answer 4

const HomeIcon = (props) => (
  <SvgIcon {...props}>
    <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
  </SvgIcon>
 );
<SelectField 
    dropDownMenuProps={{
         iconButton:<HomeIcon />,
    }}
 />

您可以覆盖 dropDownMenuProps 以呈现不同的图标