Ant Design's Time Picker color

Question

Is there an easy and quick way to modify these colors?

Thanks in advance

Answer 1

By the documentation from Ant Design,

popupStyle | The style of panel | CSSProperties

you could use popupStyle as a prop and just use normal CSS to style timepicker.

or

you could use popupClassName, popupClassName={classes.timepicker}

timepicker: {
    "& .ant-picker-footer": {
        color: "#your color",
    },
}

you could find the correct className in dev tools.

Edit:

1. Here is a simple method with the use of className .

  className="timepicker-background"

and in CSS we have,

.timepicker-background {
  background-color: rgb(26, 25, 29);
  border-color: rgb(247, 30, 30);
}

2. Here is another method with the use of popupStyles

  popupStyle={{ fontSize: 30 }}

Demo in Codesandbox