[FIXED] How to change the icon color of MUI TextField type time?

Issue

Is there a css way to change the color of of MUI TextField type time

src="https://i.stack.imgur.com/gprct.png" alt="enter image description here" />

I'm able to change the time but not the icon

https://stackblitz.com/edit/react-puyjkf-cbnpun?file=demo.js

Solution

Try this is will work for you.

Demo.js:

<TextField
    sx={{
      '& input[type="time"]::-webkit-calendar-picker-indicator': {
        filter:
          'invert(78%) sepia(66%) saturate(6558%) hue-rotate(84deg) brightness(127%) contrast(116%)',
      },
    }}
    type="time"
    variant="outlined"
  />

Answered By - Naju Bhadarka
Answer Checked By - - David Goodson (ReactFix Volunteer)