React admin 自定义输入组件与文本输入基本样式

【问题标题】：React admin custom input component with text input base styleReact admin 自定义输入组件与文本输入基本样式
【发布时间】：2020-12-17 20:36:53
【问题描述】：

我为我的 react-admin 项目创建了一个 DateTimePicker 组件：

import { DateTimePicker, DateTimePickerProps, MuiPickersUtilsProvider } from "@material-ui/pickers";
import { FC } from "react";
import { FieldTitle, InputProps, useInput } from "react-admin";

import MomentUtils from "@date-io/moment";
import moment from "moment";
import "moment/locale/fr";

interface DateTimeInputProps extends InputProps<DateTimePickerProps> {
  label: string;
}

export const DateTimeInput: FC<DateTimeInputProps> = ({ source, label, resource, options }) => {
  const {
    input: { value, onChange },
    isRequired,
  } = useInput({ source });

  return (
    <MuiPickersUtilsProvider
      libInstance={moment}
      utils={MomentUtils}
      locale='fr'
    >
      <DateTimePicker
        label={<FieldTitle
          label={label}
          source={source}
          resource={resource}
          isRequired={isRequired}
        />}
        value={value || null}
        onChange={onChange}
        format="llll"
        ampm={false}
        {...options}
      />
    </MuiPickersUtilsProvider>
  );
}

效果很好，但是设计没有遵循其他经典输入：

在自定义 Material-ui 组件中保持相同设计的最简单方法是什么？

【问题讨论】：

标签： reactjs material-ui react-admin

【解决方案1】：

有 3 种变体可供选择，适用于 MUI 输入元素：outlined、filled 和 standard。您需要提供 DateTimePicker 并将 inputVariant 属性设置为 filled 以获得“灰色”外观。另外，您需要传递一个 className 属性，以便 react-admin 可以传递父级控制的类（这应该可以解决宽度问题）。

<DateTimePicker {...props} inputVariant="filled" className={props.className} />

您可以点击下面的链接查看outlined、filled 和standard 的外观：

https://mui.com/components/text-fields/#basic-textfield

【讨论】：