Home > database >  How to change the icon color of MUI TextField type time?
How to change the icon color of MUI TextField type time?

Time:12-05

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

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

CodePudding user response:

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"
  />
  • Related