如何为Material-UI DatePicker对话框设置标题？

嘿，我来帮你搞定这个问题！你用的是@material-ui/pickers里的DatePicker组件，要给弹出的对话框加标题其实很容易，这个组件提供了两种常用的方式来实现，下面给你详细说明：

方法1：通过DialogProps快速设置标题 #

DatePicker组件允许通过DialogProps属性传递Material-UI原生Dialog组件的所有配置项，其中就包括设置对话框标题的title属性。只需要给DatePicker加上这个配置即可：

import React, { Fragment, useState } from "react";
import { DatePicker } from "@material-ui/pickers";

function BasicDatePicker(props) {
  const [selectedDate, handleDateChange] = useState(new Date());
  return (
    <Fragment>
      <DatePicker
        label="Basic example"
        value={selectedDate}
        onChange={handleDateChange}
        animateYearScrolling
        // 配置对话框标题
        DialogProps={{
          title: "请选择日期"
        }}
      />
    </Fragment>
  );
}

方法2：自定义标题组件（更灵活） #

如果需要对标题做个性化定制（比如添加图标、自定义字体样式、额外按钮等），可以使用renderDialogTitle属性来完全自定义标题的内容：

import React, { Fragment, useState } from "react";
import { DatePicker } from "@material-ui/pickers";
import { DialogTitle, Typography, IconButton } from "@material-ui/core";
import CloseIcon from "@material-ui/icons/Close";

function BasicDatePicker(props) {
  const [selectedDate, handleDateChange] = useState(new Date());
  
  // 自定义标题组件，可自由添加内容和样式
  const CustomDialogTitle = () => (
    <DialogTitle style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
      <Typography variant="h6" color="primary">
        📅 选择目标日期
      </Typography>
      <IconButton size="small">
        <CloseIcon />
      </IconButton>
    </DialogTitle>
  );

  return (
    <Fragment>
      <DatePicker
        label="Basic example"
        value={selectedDate}
        onChange={handleDateChange}
        animateYearScrolling
        // 使用自定义标题
        renderDialogTitle={CustomDialogTitle}
      />
    </Fragment>
  );
}

这两种方法都能满足你的需求：第一种适合快速添加简单标题，第二种适合需要高度定制的场景，你可以根据自己的需求选择~

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