如何从 React TextField Select 中删除箭头

Question

我正在使用 TextField Select 作为下拉菜单。 尝试在选择上使用“components={{ DropdownIndicator:() => null}}”，但没有成功。

        <TextField disabled={true}                           
           label="itemNo"
           value={currentItem.itemNo}
           variant="outlined"
           InputLabelProps={{ style: { fontSize: 18, color: 'grey', backgroundColor: 'white', fontFamily: "monospace" }, shrink: true }}
           select
         >
                {this.state.itemNo && this.state.itemNo.map((item) => (
                    <MenuItem style={{ fontSize: 14, fontFamily: "monospace" }} key={item.key} value={item.id}>
                        {item.key}
                </MenuItem>
            ))}
       </TextField>

Answer 1

要删除选择下拉图标，您必须在

IconComponent: () => null

中传递

SelectProps

，应用于 Select 元素的 Pros。它接受选择元素 props 的对象

有关

select

道具的更多信息 https://material-ui.com/api/select/

这是工作示例https://codesandbox.io/s/quizzical-frost-g4s52?file=/src/App.js

<TextField disabled={true}                           
           label="itemNo"
           value={currentItem.itemNo}
           variant="outlined"
           InputLabelProps={{ style: { fontSize: 18, color: 'grey', backgroundColor: 'white', fontFamily: "monospace" }, shrink: true }}
           select
          // for passing props in select component
           SelectProps={{ IconComponent: () => null }}
         >
                {this.state.itemNo && this.state.itemNo.map((item) => (
                    <MenuItem style={{ fontSize: 14, fontFamily: "monospace" }} key={item.key} value={item.id}>
                        {item.key}
                </MenuItem>
            ))}
       </TextField>