使用MUI InputAdornment时控制台报错：React不识别startAdornment属性

你把startAdornment放在了inputProps里，这个属性会被传递给底层原生<input> DOM元素，但原生input并不支持startAdornment，所以React会抛出“无法识别DOM元素上的startAdornment属性”的错误。startAdornment是MUI内部Input组件的专属属性，需要通过TextField的InputProps（注意大写I）来传递。

import { Stack, TextField } from "@mui/material";
import InputAdornment from "@mui/material/InputAdornment";

export const MuiText = () => {
  return (
    <Stack spacing={4}>
      <Stack spacing={2} direction='row'>
        <TextField label='a' variant="filled" required color='success' />
        <TextField 
          label='b' 
          variant='outlined' 
          InputProps={{
            startAdornment: <InputAdornment position='start'> $ </InputAdornment>
          }} 
        />
        <TextField label='c' variant="standard" type="password" />
      </Stack>
    </Stack>
  );
}

如果需要单独定义配置对象，也可以这样写：

import { Stack, TextField } from "@mui/material";
import InputAdornment from "@mui/material/InputAdornment";

export const MuiText = () => {
  const inputComponentProps = {
    startAdornment: <InputAdornment position='start'> $ </InputAdornment>
  };

  return (
    <Stack spacing={4}>
      <Stack spacing={2} direction='row'>
        <TextField label='a' variant="filled" required color='success' />
        <TextField 
          label='b' 
          variant='outlined' 
          InputProps={inputComponentProps} 
        />
        <TextField label='c' variant="standard" type="password" />
      </Stack>
    </Stack>
  );
}

• inputProps（小写i）：用于传递原生<input>元素支持的属性，比如placeholder、disabled等。
• InputProps（大写I）：用于传递MUI内部Input组件的属性，像startAdornment、endAdornment这类装饰性配置都要通过它传递。

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