How to remove arrow from React TextField Select

Question

I am using TextField Select for dropdown. Tried using "components={{ DropdownIndicator:() => null}}" on select, but did not work.

        <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

For removing the select dropdown icon you will have to pass IconComponent: () => null in SelectProps, Props applied to the Select element. it accepts an object of the select elements props

for more information about select's props https://material-ui.com/api/select/

Here is the working example 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>