Search code examples
reactjsmaterial-uitimepicker

How to change fontColor when TimePicker is disabled- MUI React

I'm trying to set another color to the text in TimePicker when it is disabled, but with no success. Does anyone knows how to do change it using sx or slotProps? Here is my current code.

<TimePicker
          disabled={true} // disabled here
          ampm={false}
          views={['hours', 'minutes', 'seconds']}
          sx={{
            backgroundColor: "#333335",
            font: "white",
            color: "#FFFF",
            textDecoration: "bold",
            input: {
              color: "#FFFF",
              fontSize: "1.4rem",
            }
          }}
          slotProps={{
            popper: {
              sx: {
                "& .MuiList-root": {
                  backgroundColor: "#333335",
                },
                "& .MuiMenuItem-root": {
                  "&.Mui-selected": {
                    backgroundColor: "#04395E",
                    color: "white"
                  },
                  color: "white"
                },
               
              },
            },
          }}
          value={selectedTime}
          onChange={(newTime: any) => setSelectedTime(newTime)}
          timeSteps={{hours: 1, minutes: 1, seconds: 1}}
/>

Image

Solution

  • The placeholder is styled using the -webkit-text-fill-color property. Also, it has an opacity of .42 by default so any color will be semi-transparent, unless you set the opacity back to 1:

    <TimePicker
  sx={{
    input: {
      '&.Mui-disabled': {
        WebkitTextFillColor: '#FFF',
        opacity: 1
      }
    }
  }}
/>

    Demo.