Search code examples
reactjsmaterial-uitimepicker

How to change background color of Dropdown in TimePicker and font color - MUI React


I'm trying to change some properties like background color and font color in TimePicker using the css className properties, but with no success. Does anyone knows how to do this and where can I find a docummentation with these properties?

<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",
            },
          }}
          value={selectedTime}
          onChange={(newTime: any) => setSelectedTime(newTime)}
          timeSteps={{hours: 1, minutes: 1, seconds: 1}}
        />

TimePicker


Solution

  • You can use slotProps in TimePicker.

    For example:

    <TimePicker
      /* { ...restProps } */
      slotProps={{
        popper: {
          sx: {
            "& .MuiList-root": {
              backgroundColor: "yellow",
            },
            "& .MuiMenuItem-root": {
              "&.Mui-selected": {
                 backgroundColor: "green",
                 color: "blue"
              },
              color: "red"
            },
            "& .MuiDialogActions-root": {
              backgroundColor: "black",
            },
          },
        },
      }}
    />;
    

    You can see the whole example here: codesandbox.io