This borderless text-field solution is exactly what I needed...

<TextField
  variant="standard" // <== modified this line
  margin="normal"
  required
  fullWidth
  id="phoneNumber"
  name="phoneNumber"
  autoComplete="phoneNumber"
  autoFocus
  onChange={handlePhoneNumberChange}
  placeholder="Phone Number"
  InputProps={{
    startAdornment: <AccountCircle />, // <== made a tweak here
    disableUnderline: true, // <== introduced this attribute
  }}
/>

These two properties appear to be crucial...

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

If you want to eliminate the border in a TextField fieldset using MUI 5, just include the code snippet below.

    sx={{
      "& fieldset": { borderWidth: '0px' },
    }}

Customize TextField Outlines

To customize the outlines of your text field, you can add the following code snippet to your TextField component:

 sx={{border: 'none',"& fieldset": { border: 'none' },}}

Below is an example of how to implement this code:

 <TextField
  variant="outlined"
  sx={{border: 'none', "& fieldset": { border: 'none' },}}
  margin="normal"
  required
  fullWidth
  id="phoneNumber"
  disableUnderline={false}
  // label="Phone Number"
  name="phoneNumber"
  autoComplete="phoneNumber"
  autoFocus
  onChange={handlePhoneNumberChange}
  className={classes.textField}
  placeholder="Phone Number"
  InputProps={{
    startAdornment: (
      <InputAdornment position="start">
        <AccountCircle />
      </InputAdornment>
    ),
  }}
/>

Customize Standard TextField Underlines

If you want to remove the underline from a standard text field, you can use the following code snippet:

InputProps={{ disableUnderline: true }}

Here is an example code snippet demonstrating how to achieve this:

<TextField
 fullWidth
 placeholder="Search..."
 InputProps={{ disableUnderline: true }}
/>

After exploring the features of the InputBase component, I must say it functions impeccably. This is definitely a top choice.

I also noticed they offer a helpful sandbox environment for experimentation: Sandbox InputBase

If you want to remove the border, simply use this code snippet:

<InputBase placeholder="Hello.." />

To enhance your textField design, include outline: 'none'

By the year 2022, if you are utilizing MUI version 5 or higher, there are solutions available for this issue. Currently, there is no documentation on how to achieve this in Textfield.

Another excellent component provided by MUI is Input, and fortunately, it accepts nearly all the props that can be passed to Textfield. By setting disableUnderline={false}, it will function as expected.

    <Input
      disableUnderline={true}
      variant="standard"
      autoFocus
      onChange={yourChangeHandler}
      value={value}
      placeholder="Title"
      fullWidth
    />

At last, this css code is effective (2022)

  '& .MuiInput-root': {
    '&:before, :after, :hover:not(.Mui-disabled):before': {
      borderBottom: 0,
    },
  },

Simply include

".MuiOutlinedInput-notchedOutline": { border: "none" },

in the sx attribute.

This solution is applicable to both MUI Select and Textfield components.

I successfully implemented the sx prop with the specified attributes in TextField and it functioned properly.

 <TextField
      sx={{
        input: {
          border: "none",
        },
        "::placeholder": { color: "white" },
      }}
 
    />

Struggling with the lack of guidance in the documentation? Don't worry, you can simply target the Mui selector for that element and make direct modifications. I found success with this approach. Feel free to override the CSS as needed.

<TextField
  id="outlined-basic"
  label="Outlined"
  variant="outlined"
  sx={{ "& .MuiOutlinedInput-notchedOutline": { border: "none" } }}
 />
     
<TextField
   id="filled-basic"
   label="Filled"
   variant="filled"
   sx={{
          "& .MuiFilledInput-underline:before": {
            borderBottom: "none",
          },
          "& .MuiFilledInput-underline:after": {
            borderBottom: "none",
          },
          "& .MuiFilledInput-underline:hover:not(.Mui-disabled):before": {
            borderBottom: "none",
          },
        }}
 />

For a live demonstration, visit codesandbox

Underline Disablement Feature
If activated, the input field will not have an underline.

<Input
            variant="standard"
            disableUnderline={true}
            required
            color="info"
            fullWidth
            margin="dense"
            focused
          />

API

To eliminate the border from all MuiOutlinedInput elements, simply include the following code in your theme's components section:

export const customTheme = createTheme({
  // ...
  components: {
    // ...
    MuiOutlinedInput: {
      styleOverrides: {
        notchedOutline: {
          border: 'none',
        },
      },
    },
  },
})