InputProps可以将输入的变体传递给样式。对于outlined输入，有一个名为的类.MuiOutlinedInput-notchedOutline在这个问题的情况下设置边界。要修改这个类，传递的样式到notchedOutline的propsInputProps。

const useStyles = makeStyles(() => ({
  noBorder: {
    border: "none",
  },
}));

const TextInput = props => {
  const { onChange, type} = props;
  const classes = useStyles();

  return (
    <TextField
      variant="outlined"
      margin="normal"
      required
      fullWidth
      id="phoneNumber"
      disableUnderline={false}
      // label="Phone Number"
      name="phoneNumber"
      autoComplete="phoneNumber"
      autoFocus
      classes={{notchedOutline:classes.input}}

      // onChange={handlePhoneNumberChange}
      className={classes.textField}
      placeholder="Phone Number"
      InputProps={{
        startAdornment: (
          <InputAdornment position="start">
            <AccountCircle />
          </InputAdornment>
        ),
        classes:{notchedOutline:classes.noBorder}
      }}
    />
  );
};

这是工作沙箱链接：https : //codesandbox.io/s/material-demo-forked-nhlde

我正在寻找一个无边界文本字段，这对我有用......

<TextField
  variant="standard" // <== changed this
  margin="normal"
  required
  fullWidth
  id="phoneNumber"
  name="phoneNumber"
  autoComplete="phoneNumber"
  autoFocus
  onChange={handlePhoneNumberChange}
  placeholder="Phone Number"
  InputProps={{
    startAdornment: <AccountCircle />, // <== adjusted this
    disableUnderline: true, // <== added this
  }}
/>

这2个props似乎是关键……

variant="standard"
 InputProps={{
        disableUnderline: true,
      }}

我在这里尝试了所有答案。

不起作用

我发现这个InputBase 效果很好。这正是您应该使用的。

他们也提供了沙箱 Sandbox InputBase

在您的 textField 样式中添加 outline: 'none'