从 TexfField 中删除边框

Question

我开始为 React 使用 @Mui 并用它来创建表单，但是在我关注 TextField 之后，我在下面的屏幕上看到了边框链接：

我的代码如下所示：

        <FormGroup>
         <TextField
            label="Description"
            name="description"
            multiline
            rows={5}
            fullWidth
            value={data.description}
            variant="standard"
            onChange={onHandleChange}
        />
        </FormGroup>

怎么去掉？

@Edit 我解决了我的问题。 出现这个元素的边框是因为我有 Breeze 的 styles

Answer 1

当TextField使用makeStyles聚焦时，您可以使用:after更改其样式（删除下划线）

在您的情况下，请执行以下操作：

import TextField from "@mui/material/TextField";
import FormGroup from "@mui/material/FormGroup";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles({
  underline: {
    "&&:after": {
      borderBottom: "none"
    }
  }
});
export default function ComboBox() {
  const classes = useStyles();

  return (
    <FormGroup>
      <TextField
        InputProps={{ classes }}
        label="Description"
        name="description"
        multiline
        rows={5}
        fullWidth
        value={data.description}
        variant="standard"
        onChange={onHandleChange}
      />
    </FormGroup>
  );
}

如果你想要它完全没有边框，你可以将InputProps={{ disableUnderline: true }}传递给你的TextField

Answer 2

通常这也可以通过 CSS 来完成。

  input {
    outline: none
  }