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