对话框中的材料 UI 更改日期字段样式答案

【问题标题】：Material UI change date field style in dialog对话框中的材料 UI 更改日期字段样式
【发布时间】：2021-11-10 06:51:03
【问题描述】：

我在我的 React 项目中使用 Material-UI，并使用它的日期选择器组件来呈现日期项。但默认样式不适合我的需要，我想在日期选择器对话框中使用选择器作为日期显示，替换其文本字段。查看 Material-UI 的日期选择器相关 API 后，我找不到合适的方法。有什么帮助吗？这将非常有帮助。

下图是我要渲染的日期选择器样式：

wanted style

下图为其默认样式，默认为文字：

default style

代码如下：

import { useState } from "react";
import { makeStyles } from "@material-ui/styles";
import { MuiPickersUtilsProvider, KeyboardDatePicker } from "@material-ui/pickers";
import DateFnsUtils from "@date-io/date-fns";

const useStyle = makeStyles({
  root: {
    marginBottom: "3rem",
  },
});

const CustomizeDatePicker = () => {
  const classes = useStyle();
  const [selectedDate, setSelectedDate] = useState(new Date());

  return (
    <div className={classes.root}>
      <MuiPickersUtilsProvider utils={DateFnsUtils}>
        <KeyboardDatePicker
          autoOk
          label="end date"
          format="yyyy-MM-dd"
          views={["year", "month", "date"]}
          openTo="date"
          value={selectedDate}
          onChange={setSelectedDate}
        />
      </MuiPickersUtilsProvider>
    </div>
  );
};

export default CustomizeDatePicker;

【问题讨论】：

标签： javascript reactjs datepicker material-ui

【解决方案1】：

首先，第 3 方库通常不像您希望的那样灵活。如果它只是样式，则可以使用您的 css 使用它们的类名覆盖它并相应地设置样式。可悲的是，当涉及到功能时，无论它们暴露什么，您都可以使用它。在极少数情况下，他们允许使用扩展功能对其组件进行原型设计，但这里并非如此。

我建议使用 https://material-ui-pickers.dev/ 作为 material-ui 甚至建议它，因为扩展功能。

然后看看他们的 API 以及它能做什么https://material-ui-pickers.dev/api/DatePicker

您唯一可能的解决方案是创建您自己的日期选择器。

【讨论】：