I've encountered an issue with the borders of the text fields in my React project.
Here's how I want the text fields to look:
https://i.stack.imgur.com/MP6DG.png
Currently, the borders appear straight in the browser even though I want them rounded.
I attempted to adjust the left border, but the outcome was not quite what I expected.
Here is the result I am getting:
https://i.stack.imgur.com/bTy83.png
<TextField
variant='outlined'
label='First Name'
name='first_name'
id='first_name'
size='medium'
placeholder='First Name'
style={{
borderLeft: '6px solid #2596be', // Thickened left border
outlineColor: '#2596be', // Outline color
...QuadSignIn.textField, // Your existing styles
}}
InputProps={{
startAdornment: (
<InputAdornment position='start'>
<AccountCircleOutlinedIcon />
</InputAdornment>
),
}}
onChange={(e) => {
handleChange(e);
formik.handleChange(e);
}}
error={
formik.touched.first_name &&
Boolean(formik.errors.first_name)
}
onBlur={formik.handleBlur}
helperText={
formik.touched.first_name &&
Boolean(formik.errors.first_name)
? formik.errors.first_name
: null
}
value={signupData.first_name}
/>