I have a simple text field on my website that triggers a search when the user inputs a value. I am wondering if it is possible to style the text field differently depending on whether it is empty or has content.
Specifically, I want to change the border color of the text field to green when it is not empty, regardless of whether the user's cursor is in the input field or not.
const CustomTextField = withStyles({
root: {
'& label.Mui-focused': {
color: '#1062de',
},
'& .MuiInput-underline:after': {
borderBottomColor: '#1062de',
},
'& .MuiOutlinedInput-root': {
'& fieldset': {
borderColor: 'black',
},
'&:hover fieldset': {
borderColor: 'black',
},
'&.Mui-focused fieldset': {
borderColor: '#1062de',
},
},
},
})(TextField);