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 />,
    }}
 />

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

Answer 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,
        }}
      />

Answer 4

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

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

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

Answer 5

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

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

5 个答案: