Paasing props to MUI Box component overrider (Typescript)-CodePudding

I cant work out how to pass props to Box component override.

I need to pass position="end"" as required by InputAdornment but cant find how in the docs.

Full component is

<Select
          value={value}
          onChange={handleChange}
          input={
            <OutlinedInput
              endAdornment={
                photoRequired && (
                  <Box component={InputAdornment} position="end" pr={3}>
                    {required && <Gallery />}
                    <Gallery />
                  </Box>
                )
              }
            />
          }
        >
          {choices.map((choice, i) => (
            <MenuItem key={i} value={i   1}>
              {choice}
            </MenuItem>
          ))}
        </Select>

I am getting error trying to pass in the way above as its not expected on Box.

Warning: Failed prop type: The prop `position` is marked as required in `ForwardRef(InputAdornment)`, but its value is `undefined`.```

CodePudding user response：

Try creating your own InputAdornment component that uses the position, such as:

const EndInputAdornment = () => {
   return <InputAdornment position="end"/>
};

Then you can use that component to the Box:

<Box component={EndInputAdornment} pr={3}>
...

or if you don't want to create a separate component:

<Box component={<InputAdornment position="end"/>} pr={3}>

should work