How can I add Adornment inside MUI InputBase?

Question

I am trying to place MUI Adornment inside of MUI InputBase, but so far I can only get it to render outside of the input:

    <InputField
      id={id}
      ref={ref}
      error={error}
      type={type}
      multiline={multiline}
      minRows={minRows}
      inputProps={inputProps}
      endAdornment={
        <InputAdornment position="end">adornment</InputAdornment>
      }
      {...props}
    />

https://codesandbox.io/s/ecstatic-pond-yvi19?file=/src/CustomTextField.js:1320-1956

Answer 1

`const useStyles = makeStyles((theme) => ({
    inputfield: {
    "& .MuiInputBase-root": {
      borderRadius: 4,
      backgroundColor: "#FCFCFC",
      border: "1px solid #D4DEF5",
      fontSize: 16,
      padding: "10px 12px",
      boxSizing: "border-box",
      width: 280,
      height: 35,
      "&:hover": {
        borderColor: "#1565c0",
      },
    },
    "&.Mui-focused": {
      boxShadow: `${alpha(theme.palette.primary.main, 0.25)} 0 0 0 0.2rem`,
      borderColor: theme.palette.primary.main,
    },
  },
}));

<div className={classes.inputfield}>
        <InputBase
         startAdornment={
         <InputAdornment position="start">
         <CalendarIcon />
         </InputAdornment>
          }
        />
      </div>`

style to MuiInputBase-root not MuiInputBase-input

Answer 2

Just move below styles to InputContainer instead of InputField:

box-shadow: 0 1px 2px 0 rgba(184, 200, 224, 0.22);
border: 1px solid
  ${(props) => (props.error ? props.theme.palette.error.dark : "#d8e0f0")};
border-radius: 14px;

So, based on mentioned description, you have:

export const InputField = styled(InputBase)`
  & > .MuiInputBase-input {
    font-family: Raleway;
    padding: 10px 16px;
  }
`;


export const InputContainer = styled("div")`
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 2px 0 rgba(184, 200, 224, 0.22);
  border: 1px solid
    ${(props) => (props.error ? props.theme.palette.error.dark : "#d8e0f0")};
  border-radius: 14px;
`;