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

Question

我正在使用material-ui select字段。我想将给定的下拉图标更改为其他字体图标。怎么做到这一点？我没有看到任何选择来覆盖这种风格

Answer 1

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

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

您可以覆盖dropDown菜单道具以呈现不同的图标

Answer 3

如果你把它传递给另一个comp。像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,
        }}
      />

Answer 4

如今，对我而言，这是最好的方式

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

完美无故地添加任何CSS。