My goal is to change the input border color to white regardless of whether it is focused, hovered, or just by default.
I have attempted to create a theme using makeStyles for the text and input fields but it does not seem to be working. Here is my code:
const useStyles = makeStyles((theme) => ({
textField: {
'& .MuiOutlinedInput-root': {
borderColor: 'white',
'&:hover': {
borderColor: '#ffffff',
},
'&.Mui-focused': {
borderColor: 'white',
},
},
'& .MuiOutlinedInput-input': {
color: 'white',
},
'& .MuiInputAdornment-root': {
color: 'white',
},
},
}));
This is how I am creating my textfields or input fields:
<TextField
type="number"
name={name}
value={value}
onChange={handleChange}
InputLabelProps={{
shrink: true,
style: { color: 'white' },
}}
InputProps={{
inputProps: {
step: 1,
min: 0,
},
endAdornment: (
<InputAdornment position="end">
{isForm && (
<>
<IconButton
aria-label="increase"
size="small"
onClick={() => handleChange({ target: { name, value: parseInt(value || '0') + 1 } })}
style={{ color: 'white' }}
>
<ArrowUpwardIcon />
</IconButton>
<IconButton
aria-label="decrease"
size="small"
onClick={() => handleChange({ target: { name, value: Math.max(parseInt(value || '0') - 1, 0) } })}
style={{ color: 'white' }}
>
<ArrowDownwardIcon />
</IconButton>
</>
)}
</InputAdornment>
),
classes: {
root: classes.textField,
},
}}
sx={{ '& .MuiOutlinedInput-root': { borderColor: 'white' } }}
/>
Any suggestions on how to resolve this issue?