I need to remove the border. I used some css from stack overflow but the issue is not fixed yet . If any one please help me to fixed this issue .I shall be very thank full.
what css I write to remove the border.
<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>
InputProps
can be passed to the style the variants of the inputs. For outlined
input there a class named .MuiOutlinedInput-notchedOutline
which sets the border in this question's case. To modify this class, pass the styles to the notchedOutline
prop in InputProps
.
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}
}}
/>
);
};
Here is the working sandbox link: https://codesandbox.io/s/material-demo-forked-nhlde