定制MUI X DatePicker：为小时/分钟选择栏添加标签求助

方案1：CSS伪元素添加静态标签 #

适合仅需固定文本标签的场景，通过自定义样式给选择栏容器添加标签：

/* 小时选择栏标签 */
.MuiTimePicker-root .MuiClockPicker-clockWrapper:first-of-type::before {
  content: "小时";
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.875rem;
  color: rgba(0,0,0,0.6);
}

/* 分钟选择栏标签 */
.MuiTimePicker-root .MuiClockPicker-clockWrapper:last-of-type::before {
  content: "分钟";
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.875rem;
  color: rgba(0,0,0,0.6);
}

注意：不同版本MUI X的DOM类名可能有差异，建议通过浏览器开发者工具定位准确的容器选择器。

方案2：自定义拆分式TimePicker组件 #

支持动态内容、国际化等需求，通过拆分小时/分钟选择器并分别添加标签：

import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
import { TimePicker } from '@mui/x-date-pickers/TimePicker';
import { Box, Typography } from '@mui/material';

const CustomTimePicker = (props) => {
  return (
    <Box sx={{ display: 'flex', gap: 3, alignItems: 'flex-start' }}>
      <Box sx={{ textAlign: 'center' }}>
        <Typography variant="caption" sx={{ mb: 1, display: 'block' }}>小时</Typography>
        <TimePicker
          {...props}
          views={['hours']}
        />
      </Box>
      <Box sx={{ textAlign: 'center' }}>
        <Typography variant="caption" sx={{ mb: 1, display: 'block' }}>分钟</Typography>
        <TimePicker
          {...props}
          views={['minutes']}
        />
      </Box>
    </Box>
  );
};

// 调用示例
<DateTimePicker
  renderTimePicker={(props) => <CustomTimePicker {...props} />}
  // 其他必填props（如value、onChange等）
/>

方案3：移动端Toolbar整合标签 #

针对移动端DateTimePicker，可将标签嵌入自定义Toolbar：

import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
import { ToolbarComponent } from '@mui/x-date-pickers';
import { Box, Typography } from '@mui/material';

const CustomToolbar = (props) => {
  return (
    <ToolbarComponent {...props}>
      <Typography variant="h6">选择日期时间</Typography>
      <Box sx={{ display: 'flex', gap: 1, mt: 1 }}>
        <Typography variant="body2">小时:</Typography>
        <Typography variant="body1">{props.date?.format('HH')}</Typography>
        <Typography variant="body2">分钟:</Typography>
        <Typography variant="body1">{props.date?.format('mm')}</Typography>
      </Box>
    </ToolbarComponent>
  );
};

// 调用示例
<DateTimePicker
  toolbarComponent={CustomToolbar}
  // 其他必填props
/>

内容的提问来源于stack exchange，提问作者Ahsan Ali