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

Question

我正在使用 material-ui 的选择框组件，想要将下拉箭头图标替换为其他字体图标。如何实现？我没有找到覆盖此样式的选项。

- PCK

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 }

- Mina Djuric

---

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

我在CSS中添加了 { pointer-events: none }，但图标仍然无法点击。有什么想法吗？ - Inaara Kalani

嗨，@InaaraKalani，请查看下面的答案，具体取决于您正在使用的版本。 - Mina Djuric

Answer 2

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

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

没有任何CSS附加项，完美运作。

- Yevgeni Makarovich

---

谢谢您！您在哪里可以找到讨论这个的文档？ - Chris Stahl

@ChrisStahl 对于每个组件，您可以在 api 中找到其组件文档。例如：https://material-ui.com/api/select/ - Bikal Basnet

此处也许会对您有所帮助：https://dev59.com/JVQI5IYBdhLWcg3w8waR - Ignat Galkin

如果您使用 TypeScript，那么会抛出一个 TS 错误：Type 'ReactElement<any, any>' is not assignable to type '"view"'。 - Zac

这对于其他图标框架如Google Icons或FontAwesome会怎么样？ - Inaara Kalani

Answer 3

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

- Vivek Kapoor

---

这应该是正确的答案！通过传递属性，您允许图标按预期工作，并将点击和光标传递给它。 - Sartheris Stormhammer

Answer 4

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

您可以覆盖dropDownMenuProps来渲染不同的图标。

- Shantiswarup Tunga

---

请务必包含SelectField的文档。它无法自动导入。 - iamjpcbau

Answer 5

如果您要将它传递给其他组件（例如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,
        }}
      />

- shirish kumar

Answer 6

我们可以像这样更改图标：

声明一个组件：

const AtomDropDown = React.forwardRef<HTMLButtonElement, any>(
    ({ Icon }, ref): JSX.Element => {
        return (
            <NativeSelect
                IconComponent={() => {
                    return Icon ? Icon : <KeyboardArrowDownIcon />
                }}
            >
                {options.map((option: any) => {
                    return <option value={option.key}>{option.name}</option>
                })}
            </NativeSelect>
            </div >
        )
    }
);
export default AtomDropDown;

使用方法：

 import {AtomDropDown} from '@/components/atom/dropdown/index';
  <AtomDropDown
    Icon={<KeyboardArrowDownIcon/>}
  />

- Shubham Verma