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

【问题标题】：how to remove border in textfield fieldset in material ui如何在材质ui中的文本字段字段集中删除边框
【发布时间】：2020-12-05 20:05:42
【问题描述】：

我需要删除边框。我使用了一些来自堆栈溢出的 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>

【问题讨论】：

标签： css reactjs material-ui

【解决方案1】：

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


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

【讨论】：

很好的答案！在我的情况下，使用 TS，notchedOutline 类仅在 InputProps 的类中可用。喜欢...tsx <TextField InputProps={{ classes:{notchedOutline:classes.noBorder} }} >
嘿，我试过这个.. 不工作.. 我发现这个.. 它工作得很好.. codesandbox.io/s/material-demo-forked-rzdw0

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

【讨论】：

尝试将您的文本字段的变体属性更改为variant='standard'
如果您不想要下划线和真正的裸输入，您也可以import InputBase from "@material-ui/core/InputBase"; 并将<TextField /> 组件替换为<InputBase /> 组件。我试过这个并验证它有效。
输入图标在使用<InputBase/>时将不再存在。

【解决方案4】：

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

没用

我找到了这个InputBase 它工作得很好。这正是您应该使用的。

他们也提供了沙盒 Sandbox InputBase

【讨论】：

【解决方案5】：

截至 2022 年，如果您使用 MUI >= 版本 5，您可以在此处使用一些解决方案，目前文档中没有关于如何在 Textfield 中执行此操作的位置。

MUI 提供的另一个不错的组件是 Input，幸运的是，它接受几乎所有传递给 Textfield 的 props，您可以在其中执行 disableUnderline={false}，它会按预期工作。

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

【讨论】：