fix: Fix popupClassName prop in timepicker

components/time-picker/__tests__/__snapshots__/demo.test.js.snap

@@ -222,6 +222,51 @@ exports[`renders ./components/time-picker/demo/basic.md correctly 1`] = `
 </div>
 `;
 
+exports[`renders ./components/time-picker/demo/colored-popup.md correctly 1`] = `
+<div
+  class="ant-picker"
+>
+  <div
+    class="ant-picker-input"
+  >
+    <input
+      placeholder="Select time"
+      readonly=""
+      size="10"
+      title=""
+      value=""
+    />
+    <span
+      class="ant-picker-suffix"
+    >
+      <span
+        aria-label="clock-circle"
+        class="anticon anticon-clock-circle"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          class=""
+          data-icon="clock-circle"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
+          />
+          <path
+            d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"
+          />
+        </svg>
+      </span>
+    </span>
+  </div>
+</div>
+`;
+
 exports[`renders ./components/time-picker/demo/disabled.md correctly 1`] = `
 <div
   class="ant-picker ant-picker-disabled"

components/time-picker/__tests__/index.test.js

@@ -61,4 +61,41 @@ describe('TimePicker', () => {
     );
     expect(wrapper.render()).toMatchSnapshot();
   });
+
+  it('should pass popupClassName prop to Picker as dropdownClassName prop', () => {
+    const popupClassName = 'myCustomClassName';
+    const wrapper = mount(
+      <TimePicker
+        defaultOpenValue={moment('00:00:00', 'HH:mm:ss')}
+        popupClassName={popupClassName}
+      />,
+    );
+    expect(wrapper.find('Picker').prop('dropdownClassName')).toEqual(popupClassName);
+  });
+
+  it('should pass dropdownClassName prop to Picker as dropdownClassName prop', () => {
+    const dropdownClassName = 'myCustomClassName';
+    const wrapper = mount(
+      <TimePicker
+        defaultOpenValue={moment('00:00:00', 'HH:mm:ss')}
+        dropdownClassName={dropdownClassName}
+      />,
+    );
+    expect(wrapper.find('Picker').prop('dropdownClassName')).toEqual(dropdownClassName);
+  });
+
+  it('should combine dropdownClassName and popupClassName props and pass it to Picker as dropdownClassName prop', () => {
+    const dropdownClassName = 'myCustomClassNameOne';
+    const popupClassName = 'myCustomClassNameTwo';
+    const wrapper = mount(
+      <TimePicker
+        defaultOpenValue={moment('00:00:00', 'HH:mm:ss')}
+        dropdownClassName={dropdownClassName}
+        popupClassName={popupClassName}
+      />,
+    );
+    expect(wrapper.find('Picker').prop('dropdownClassName')).toEqual(
+      `${dropdownClassName} ${popupClassName}`,
+    );
+  });
 });

components/time-picker/demo/colored-popup.md

@@ -0,0 +1,38 @@
+---
+order: 9
+title:
+  zh-CN: 色付きポップアップ
+  en-US: Colored Popup
+---
+
+## zh-CN
+
+カスタムクラスを `TimePicker`ポップアップに渡す
+
+## en-US
+
+Passing custom class to `TimePicker` popup
+
+```jsx
+import { TimePicker } from 'antd';
+import moment from 'moment';
+
+const onChange = (time, timeString) => {
+  console.log(time, timeString);
+};
+
+ReactDOM.render(
+  <TimePicker
+    onChange={onChange}
+    defaultOpenValue={moment('00:00:00', 'HH:mm:ss')}
+    popupClassName="myCustomClassName"
+  />,
+  mountNode,
+);
+```
+
+```css
+.myCustomClassName .ant-picker-time-panel-cell-inner {
+  color: red !important;
+}
+```

components/time-picker/index.tsx

@@ -1,5 +1,6 @@
 import { Moment } from 'moment';
 import * as React from 'react';
+import classNames from 'classnames';
 import DatePicker from '../date-picker';
 import { PickerTimeProps, RangePickerTimeProps } from '../date-picker/generatePicker';
 import warning from '../_util/warning';
@@ -20,10 +21,11 @@ const RangePicker = React.forwardRef<any, TimeRangePickerProps>((props, ref) =>
 
 export interface TimePickerProps extends Omit<PickerTimeProps<Moment>, 'picker'> {
   addon?: () => React.ReactNode;
+  popupClassName?: string;
 }
 
 const TimePicker = React.forwardRef<any, TimePickerProps>(
-  ({ addon, renderExtraFooter, ...restProps }, ref) => {
+  ({ addon, renderExtraFooter, popupClassName, dropdownClassName, ...restProps }, ref) => {
     const internalRenderExtraFooter = React.useMemo(() => {
       if (renderExtraFooter) {
         return renderExtraFooter;
@@ -42,6 +44,10 @@ const TimePicker = React.forwardRef<any, TimePickerProps>(
     return (
       <InternalTimePicker
         {...restProps}
+        dropdownClassName={classNames({
+          [`${dropdownClassName}`]: dropdownClassName,
+          [`${popupClassName}`]: popupClassName,
+        })}
         mode={undefined}
         ref={ref}
         renderExtraFooter={internalRenderExtraFooter}