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

【问题标题】：How do I change the dropdown icon in material-ui select field?如何更改 material-ui 选择字段中的下拉图标？
【发布时间】：2018-10-04 05:15:05
【问题描述】：

我正在使用 material-ui 选择字段。我想将给定的下拉图标更改为不同的字体图标。如何做到这一点？我没有看到任何替代这种风格的选择

【问题讨论】：

标签： reactjs dropdown material-ui

【解决方案1】：

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

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

【讨论】：

请包含 SelectField 的文档。无法自动导入。

【解决方案2】：

在最新的 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 }

【讨论】：

这是过时的答案。在 material-ui 4.9.9 中，它必须以 Yevgeni Makarovich 指定的方式完成。然后图标获得适当的 css 类并且是可点击的。

【解决方案3】：

如果您将其传递给另一个组合。像 TablePagination 那样做

    // @flow
    import React from 'react';
    import ChevronDownIcon from 'mdi-react/ChevronDownIcon';
      <TablePagination
        colSpan={3}
        component="div"
        count={itemsTotal}
        rowsPerPage={pageSize}
        page={currentPage}
        rowsPerPageOptions={rowPerPageOptions}
        onChangePage={handleChangePage}
        onChangeRowsPerPage={handleChangeRowsPerPage}
        ActionsComponent={PaginationActionsWrapped}
        SelectProps={{
          IconComponent: () => <ChevronDownIcon />,
        }}
        classes={{
          root: classes.root,
          select: classes.select,
          selectIcon: classes.selectIcon,
          caption: classes.caption,
        }}
      />

【讨论】：

【解决方案4】：

现在，对我来说最好的方式就是

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

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

【讨论】：

谢谢你！您在哪里可以找到可以讨论此问题的文档？
@ChrisStahl 对于每个组件，您都可以在 api 中找到它的组件文档。例如material-ui.com/api/select
@BikalBasnet 谢谢。我知道 API 文档。我应该更具体。对于像我这样刚接触 MUI 生态系统的人，MUI Select 或 API 文档中没有任何示例说明如何准确使用此属性。
这个答案在这里也可能有用stackoverflow.com/questions/54929613/…
如果你使用 typescript，这会抛出一个 TS 错误：Type 'ReactElement<any, any>' is not assignable to type '"view"'

【解决方案5】：

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

【讨论】：