reactjsmaterial-uitimepicker

How to change Clock Color and Ok button fontColor in TimePicker - MUI React


I'm trying to change some properties like Clock Color and Ok button fontColor in TimePicker using the css className properties, but with no success. Does anyone knows how to do change it using sx or slotProps?

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

Here's a image showing the elements that I want to change the color TimePicker


Solution

  • You can add the following to the sx property on the TimePicker to change the color of the clock icon.

    "& .MuiSvgIcon-root": {
      color: "white"
    },
    

    and for the OK text button you can use the following on the sx property of the popper

    "& .MuiDialogActions-root .MuiButton-text": {
      color: "white"
    }