Remove the border from TexfField

wtsuport 0
Viewed 17

I started using @Mui for React and I used it to create the form but after I focused TextField I see the border linke on the below screen: enter image description here

My code look like this:

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

How remove that?

@Edit I resolved my problem. Border around of this element appears becouse I has styles from Breeze

frontend material-ui reactjs
2 Answers

You can change the styling (remove the underline) of TextField when it is focused with makeStyles using :after

In your case do the following :

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>
  );
}

And if you want it with no border at all you can pass InputProps={{ disableUnderline: true }} to your TextField

monim0

Normally this can be done via CSS as well.

  input {
    outline: none
  }
windmaomao0
Related