CODEWITHSUNDEEP
reactjsmaterial-uitimepicker
lucasnatanmelo
lucasnatanmelo

Reputation: 59

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

Upvotes: 1

Views: 291

Answers (1)

tao
tao

Reputation: 90068

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.

Upvotes: 2

Related Questions