将 Header 或 Title 渲染到 ant design - Timepicker 组件答案

【问题标题】：Render Header or Title to ant design - Timepicker component将 Header 或 Title 渲染到 ant design - Timepicker 组件
【发布时间】：2021-02-25 13:19:21
【问题描述】：

我想为时间选择器渲染一些标题/标题，以表明这是 HH、MM 和 SS（即 Hour、Minute、Sec）但无法做到。

我只能通过在选择器底部呈现的renderExtraFooter 来实现它，但我需要它在时间选择器的顶部。您可以查看以下代码：

https://stackblitz.com/edit/react-j1kksn-ef4m56?file=index.js

有些用户觉得很难找到小时、分钟和秒。最好有那个选项。

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { TimePicker } from "antd";

const onChangeTime = time => {
  console.log(time);
};

ReactDOM.render(
  <TimePicker
    onChange={onChangeTime}
    renderExtraFooter={() => (
      <div className="timePickerHeader">
        <p>HH</p>
        <p>MM</p>
        <p>SS</p>
      </div>
    )}
  />,
  document.getElementById("container")
);

.timePickerHeader {
  position: float;
}

.timePickerHeader p {
  display: inline-block;
  width: 33%;
}

【问题讨论】：

请不要编辑你原来的sn-p。分叉代码并在此处发布原始代码，或者将代码粘贴到您的问题中。

标签： reactjs antd

【解决方案1】：

看起来没有页眉选项，但您可以更改样式以使页脚与其各自的列对齐。使用网格列布局。

避免使用<p> 和position:float 和display:inline-block 支持<div> 和display:grid 和display:flex。

renderExtraFooter={() => (
  <div className="timePickerHeader">
    <div>HH</div>
    <div>MM</div>
    <div>SS</div>
  </div>
)}

.ant-picker-footer-extra {
  padding-left: 7px;
}

.timePickerHeader {
  display: grid;
  grid-auto-flow: column;
}

.timePickerHeader div {
  padding-left: 14px;
  text-align: left;
}

注意：如果您只想使每列中的文本居中，则上面的 CSS 可以简化为以下内容。

.ant-picker-footer-extra {
  padding: 0;
}

.timePickerHeader {
  display: grid;
  grid-auto-flow: column;
}

.timePickerHeader div {
  text-align: center;
}

【讨论】：