I'm in the process of creating an input field with an icon on the left side, similar to the design shown here:
https://i.sstatic.net/OK7wN.png
The input element has been successfully created. My intention is to place both the input and the icon within a grid layout, remove the border of the input, and include them in the grid container.
Unfortunately, I'm facing difficulties in removing the border. I attempted to utilize the spread operator but encountered errors in the process.
It's worth mentioning that there are other input fields within the same styles that require the border to remain intact.
Is there a way to eliminate the border specifically for this input field?
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>