TextField mui - How to change startAdornment color when hovering over TextField

Question

My TextField element that changes border color on hover as of now:

<TextField
            variant="outlined"
            placeholder={placeholder}
            InputProps={{
                startAdornment: (
                    <InputAdornment position="start">
                        <SearchIcon />
                    </InputAdornment>
                ),
                endAdornment: (
                    <IconButton position="end" sx={{ "&:hover": { color: "#00AAA7" } }}>
                        <CloseIcon />
                    </IconButton>
                ),
            }}
            sx={{
                '& .MuiOutlinedInput-root': {
                    borderRadius: '30px',
                    '&:hover fieldset': {
                        borderColor: '#00AAA7',
                      },
                },
            }}
        />

I also want to change color of [startAdornment] i.e. nothing but an Icon when hovered on root. How to do it? Please help!

Answer 1

You can change the color of startAdornment when the root is hovered by adding style to .MuiInputAdornment-positionStart class like this:

'&:hover .MuiInputAdornment-positionStart': {
    color: '#00AAA7',
},

You can take a look at this StackBlitz for a live working example of this approach.