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

Posted 2023-02-22

【中文标题】对话框中的材料 UI 更改日期字段样式

【英文标题】：Material UI change date field style in dialog

【发布时间】：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;

【参考方案1】：

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

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

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

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