如何移除React TextField Select组件的下拉箭头

原因说明 #

你使用的components={{ DropdownIndicator:() => null}}是Material UI原生Select组件的配置属性，直接挂载在TextField上不会透传给其内部封装的Select实例，因此配置不生效。

解决方案1：通过SelectProps透传配置 #

将Select相关的配置通过TextField的SelectProps参数透传给内部的Select组件即可生效，修改后代码如下：

<TextField disabled={true}                           
           label="itemNo"
           value={currentItem.itemNo}
           variant="outlined"
           InputLabelProps={{ style: { fontSize: 18, color: 'grey', backgroundColor: 'white', fontFamily: "monospace" }, shrink: true }}
           select
           SelectProps={{
             components: { DropdownIndicator: () => 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>

如果你使用的是MUI v5及以上版本，上述写法不生效时可以替换为slots配置：

SelectProps={{
  slots: { OpenIndicator: null }
}}

解决方案2：通过CSS样式直接隐藏 #

无需修改组件属性，直接通过sx配置隐藏下拉箭头节点即可：

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

内容的提问来源于stack exchange，提问作者Sarahrb