Question 222669 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – 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

Tags:

2

Answers


  1. 0

    The placeholder is styled using the -webkit-text-fill-color property:

    <TimePicker
  sx={{
    input: {
      '&.Mui-disabled': {
        WebkitTextFillColor: '#fff'
      }
    }
  }}
/>

    Demo.

    Login or Signup to reply.
  2. 0

    If you don’t pass any value or defaultValue prop, the input element will be empty and show the placeholder text instead. The placeholder text is usually a light gray color. WebkitTextFillColor change only text color, not placeholder color. So you need to pass value to your TimePicker.

    You can try this:

    <TimePicker
  disabled={true}
  ampm={false}
  views={["hours", "minutes", "seconds"]}
  defaultValue="hh:mm:ss"
  slotProps={{
    popper: {
      sx: {
        "& .MuiList-root": {
          backgroundColor: "#333335",
        },
        "& .MuiMenuItem-root": {
          "&.Mui-selected": {
            backgroundColor: "#04395E",
            color: "white",
          },
          color: "white",
        },
      },
    },
    textField: {
      sx: {
        backgroundColor: "#333335",
        textDecoration: "bold",
        "& .MuiInputBase-input.Mui-disabled": {
          fontSize: "1.4rem",
          WebkitTextFillColor: "white",
        },
        "& .MuiInputAdornment-root .MuiSvgIcon-root": {
          color: "white",
        },
      },
    },
  }}
  timeSteps={{ hours: 1, minutes: 1, seconds: 1 }}
/>;

    You can see the whole example here.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search