Почему я не могу изменить цвет границы в поле ввода материала-ui? ⇐ CSS

[Anonymous]

Я пытаюсь изменить цвет границы ввода на белый, даже если он находится в фокусе, наведен или просто установлен по умолчанию.
Я создал тему, используя makeStyles для полей текста и ввода, но похоже, это не работает. Вот что я сделал:

Код: Выделить всё

const useStyles = makeStyles((theme) => ({
textField: {
'& .MuiOutlinedInput-root': {
borderColor: 'white',
'&:hover': {
borderColor: '#ffffff',
},
'&.Mui-focused': {
borderColor: 'white',
},
},
'& .MuiOutlinedInput-input': {
color: 'white',
},
'& .MuiInputAdornment-root': {
color: 'white',
},
},
}));

Вот как создаются мои текстовые поля или поля ввода:

Код: Выделить всё

 


 handleChange({ target: { name, value: Math.max(parseInt(value || '0') - 1, 0) } })}
style={{ color: 'white' }}
>



)}

),
classes: {
root: classes.textField,
},
}}
sx={{ '& .MuiOutlinedInput-root': { borderColor: 'white' } }}
/>

Как это решить

Подробнее здесь: https://stackoverflow.com/questions/787 ... aterial-ui