Remove the border from TexfField - reactjs

Question

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:
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

Answer 1

Normally this can be done via CSS as well.
input {
outline: none
}

Answer 2

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