muix-datepicker 定制：标记小时和分钟选择

Question

我正在使用这个 muix-datepicker，我想在

hours

和

minutes

列上添加标签。不幸的是，API 不提供此功能。

需要帮助。

Answer 1

我能得到的最接近的是自定义 PickersLayout 为标签添加额外的网格行。

但是，这种方法的问题在于，如果没有每列的一些硬编码宽度，您将无法将这些标签与

multiSectionDigitalClock

对齐，因为日历和时钟作为单个网格单元包装在一起。在这里，我对每一列使用

width=3.5rem

。

const CHILD_WIDTH="56px";

function MyCustomLayout(props) {
  const { toolbar, tabs, content, actionBar } = usePickerLayout(props);
  return (
    <PickersLayoutRoot className={pickersLayoutClasses.root} ownerState={props}>
      {toolbar}
      <Box
        sx={{
          gridColumn: 2,
          display:"flex",
          justifyContent: "end",
          textAlign: "center"
        }}
      >
        <Typography variant="body1" sx={{ width: CHILD_WIDTH, display:"inline-block" }}>Hour</Typography>
        <Typography variant="body1" sx={{ width: CHILD_WIDTH , display:"inline-block"}}>Min</Typography>
        <Typography variant="body1" sx={{ width: CHILD_WIDTH , display:"inline-block"}}></Typography>
      </Box>
      <PickersLayoutContentWrapper
        sx={{
          [`.${multiSectionDigitalClockClasses.root}`]: {
            ul:{
              width: CHILD_WIDTH
            }
          },
        }}>
        {tabs}
        {content}
      </PickersLayoutContentWrapper>
      {actionBar}
    </PickersLayoutRoot>
  );
}

< DateTimePicker label = "Basic date time picker"
slots = {
  {
    layout: MyCustomLayout,
  }
}