如何在材质 ui 中的文本字段字段集中删除边框

Question

我需要删除边框。我从堆栈溢出中使用了一些 css，但问题尚未解决。如果有人请帮我解决这个问题。我将非常感谢。

我写了什么css来删除边框。

<TextField
  variant="outlined"
  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>
    ),
  }}
/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.1.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.1.1/umd/react-dom.production.min.js"></script>

Answer 1

删除 MUI 5 中 TextField 字段集中的边框，

只需添加以下内容。

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

Answer 2

对于轮廓文本字段

如果您想从轮廓文本字段中删除轮廓。然后将其添加到您的 TextField 中

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

这是你的代码...

 <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>
    ),
  }}
/>

对于标准文本字段

如果您想从标准文本字段中删除下划线。然后将其添加到您的 TextField 中

InputProps={{ disableUnderline: true }}

这是代码

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

Answer 3

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

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

Answer 4

我发现这个InputBase 它工作得非常好。这正是您应该使用的。

他们也提供了沙箱 Sandbox InputBase

要删除边框，您可以简单地使用

<InputBase placeholder="Hello.." />

Answer 5

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

<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个道具似乎是关键……

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

Answer 6

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