Material UI - remove border from one of the textfields - css

Question

I'm trying to make an input with an icon on the left. something like this:
I've already created the input. my plan is to add the input and icon in a grid. remove input's border and add it to the grid container.
I'm not able to remove the border. I've tried using the spread operator but I was getting errors.
there are other inputs using the same styles and they need the border.
How can I remove border for this input ?
const useStylesCustom = makeStyles((theme) => ({
root: {
border: '1px solid #e2e2e1',
overflow: 'hidden',
borderRadius: 2,
backgroundColor: '#fff',
transition: theme.transitions.create(['border-color', 'box-shadow']),
'&:hover': {
backgroundColor: '#fff',
},
'&$focused': {
backgroundColor: '#fff',
borderColor: '#DFDFDF',
},
'&$error': {
borderColor: theme.palette.error.main,
},
},
focused: {},
error: {},
}));
<Grid container>
<Grid xs={2} style={{ alignSelf: 'center', textAlign: 'center' }} item>
<img src="/img/usa_flag.svg" height="25" />
</Grid>
<Grid item xs={10}>
<TextField
fullWidth
label='Phone number'
variant='filled'
value={lastName}
style={{ border: '0' }}
InputProps={{ classes, disableUnderline: true }}
onChange={(e) => setLastName(e.target.value)}
/>
</Grid>
</Grid>

Answer 1

You can remove the variant and no border will be displayed:
<Grid container style={{border: "1px solid black"}}>
<Grid xs={2} style={{ alignSelf: 'center', textAlign: 'center' }} item>
<img src="/img/usa_flag.svg" height="25" />
</Grid>
<Grid item xs={10}>
<TextField
fullWidth
label='Phone number'
value={"lastName"}
style={{ border: '0' }}
InputProps={{ classes, disableUnderline: true }}
/>
</Grid>
</Grid>
Here is a sandbox.